一、什么是定位

改變元素在頁面中的位置

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設、成都外貿(mào)網(wǎng)站建設與策劃設計,臨西網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設十多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:臨西等地區(qū)。臨西做網(wǎng)站價格咨詢:18982081108

二、定位的分類

1、普通流定位

2、浮動定位

3、相對定位

4、絕對定位

5、固定定位

三、普通流定位

頁面中元素的默認定位方式，默認文檔流，從上往下，從左往右

1、每個元素都在頁面有自己的空間

2、每個元素都是從父元素的左上角開始顯示

3、塊級元素都是按照從上到下的方式逐行排列，每個元素獨占一行

4、行內(nèi)元素是多個元素在一行顯示，從左往右逐個排列

四、浮動定位

1、當元素設置浮動后，該元素脫離默認文檔流，后面的元素會上前補位。當前元素會在當前行，向左或者向右排列

float：left、right、none

特點：

（1）、元素一旦浮動，就脫離文檔流了，不占據(jù)頁面空間，后面會上前補位

（2）、浮動元素會?？吭诟冈氐淖筮?右邊，或者其他已經(jīng)浮動元素邊緣

（3）、浮動就是解決多個塊級元素在一行顯示的問題

2、浮動引發(fā)的特殊情況

a、（1）當父元素顯示不下所有已浮動元素的時候，顯示不下的幾個將換行顯示，換行顯示的規(guī)則：優(yōu)先上浮，之后向左/右對齊

（2）浮動元素占位，浮動元素會根據(jù)浮動方向，占據(jù)方向上的位置，不讓其他后面浮動元素占用

b、元素一旦浮動，如果沒有定義寬度，寬度會以內(nèi)容為準

c、元素一旦浮動起來，就變成了塊級元素，可以設置寬高，可以設置上下外邊距

d、文本，行內(nèi)元素，行內(nèi)塊元素是不會被浮動元素壓在下方。而是巧妙的避開了所有浮動元素，圍繞者浮動元素顯示

e、清除浮動：元素一旦浮動起來會對后續(xù)元素帶來一定影響（后續(xù)元素會上前補位），如果后續(xù)元素不想上前補位，那么給后續(xù)元素設置clear，清除前面浮動元素帶來的影響

clear：left/right/both

f、高度坍塌，塊級元素的高度如果不設置，高度以內(nèi)部元素內(nèi)容為準，但是如果內(nèi)部元素都是浮動元素，浮動元素不占據(jù)頁面空間，父元素的高沒有了

解決方案：

   1、直接為父元素設置高度，弊端：不知到父元素高度

   2、父元素也浮動，弊端：浮動會影響后續(xù)元素

   3、overflow：hidden，弊端：當元素真的需要顯示溢出內(nèi)容時，就顯示不出來了

   4、在父元素中追加一個空的塊級元素，并設置clear：both

3、顯示

1、顯示方式

display

元素在頁面中的顯示表現(xiàn)形式（塊級，行內(nèi)，行內(nèi)塊）

取值：

（1）none：隱藏，不顯示元素，不占據(jù)位置

（2）block：讓元素的表現(xiàn)形式和塊級元素一樣，特點：獨占一行，可以設置寬高，垂直外邊距

（3）inline：讓元素和行內(nèi)元素一樣，特點：多個元素公用一行，不能設置寬高和垂直外邊距

（4）inline-block：讓元素的表現(xiàn)形式和行內(nèi)塊一樣，特點：多個元素在一行中顯示，但是可以設置寬高和垂直外邊距

（5）table：讓元素的表現(xiàn)形式和table一樣，特點：尺寸以內(nèi)容為準，每個元素獨占一行，允許修改尺寸

2、顯示效果

visibility

取值

visible：默認可見

hidden：隱藏

display：none和visibility：hidden的區(qū)別  ：display隱藏，脫離文檔流，不占據(jù)頁面空間，visibility不脫離文檔流，占據(jù)頁面空間

3、透明度

opacity

取值：0～1 越小越透明

opacity和rgba的區(qū)別：opacity作用于元素，只要跟元素相關的顏色都會跟著透明，可以作用到子元素，rgba只改變當前元素的透明度，不會影響其他元素

4、垂直對齊方式

vertical-align

取值：top/middle/bottom

使用場合：

（1）table標簽中，控制文字的垂直對齊，取值：top/middle/bottom

（2）img標簽，控制圖片與前后文字的垂直對齊方式,取值：top/middle/bottom/baseline

5、光標

cursor：

取值：

（1）default：箭頭

（2）pointer：手

（3）text：I

（4）crosshair：十字

（5）wait：沙漏或者轉圈

（6）help：問號

五、定位

1、定位的屬性

position：

取值：

（1）static： 默認值，靜態(tài)，默認文檔流

（2）relative：相對定位

（3）absolute:絕對定位

（4）fixed：固定定位

   專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和需要注意的小細節(jié)，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰(zhàn)教程，學習工具，全棧開發(fā)學習路線以及規(guī)劃）

元素的position設置為relative/absolute/fixed中任意一個值，該元素被稱為已定位元素

偏移屬性

top/bottom/right/left

left：100px  向由移100px

2、相對定位

元素相對于原來的位置偏移某個距離，沒有脫離默認文檔流，頁面上的位置不會被其他元素補位

語法：position：relative；必須配合偏移屬性使用

使用場合：作為絕對定位的祖先元素

（1）位置微調

3、絕對定位

絕對定位的元素會脫離默認文檔流，后面元素會向前補位，絕對定位的元素會相對于離他最近的已定位的祖先元素去實現(xiàn)定位，如果所有祖先元素不是已經(jīng)定位元素，相對于body去實現(xiàn)定位

屬性：position：absolute；配合偏移屬性使用

使用場合：有層疊效果時

4、固定定位

將元素固定在頁面的某一個位置，元素不會隨滾動條發(fā)生位置變化，一直固定在可是區(qū)域內(nèi)

語法：

position：fixes；配合偏移屬性使用

注意：

（1）固定定位脫離文檔流，不占頁面空間

（2）固定定位元素變?yōu)閴K級元素

（3）相對于body實現(xiàn)位置的偏移

堆疊順序

元素變?yōu)橐讯ㄎ辉?，有可能出現(xiàn)堆疊，想修改堆疊順序

z-index

取值：無單位的數(shù)字，數(shù)字越大，元素越靠上顯示，父子元素間z-index無效，永遠都是子元素在父元素上面，只有已定位元素才能使用z-index

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站欄目：CSS中的定位介紹-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://chinadenli.net/article48/dhpihp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、云服務器、網(wǎng)站建設、標簽優(yōu)化、品牌網(wǎng)站設計、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)