css中的定位

本文只是個額外的說明，作為基礎知識的補充和額外的關注點

定位的分類以及預設定位

fix,static,relative,absolute

各個定位的包含塊是怎麼樣的

1.relative和static的包含塊由最近的塊級框，表單元格或行內塊祖先框的內容邊界構成

2.fixed的包含塊是視窗本身

3.absolute的包含塊是最近的position不是static的祖先元素（absolute,relative,fixed），如果祖先是塊級元素，包含塊則設定為該元素的內邊距邊界，如果祖先是行內元素，則是內容邊界，如果沒有祖先，元素的包含塊是初始包含塊

4.根元素的包含塊就是初始包含塊，在html中，根元素就是html元素，不過有些瀏覽器會使用body作為根元素，在大多數瀏覽器中，初始包含塊是乙個視窗大小的矩形。

relative和static並不會改變元素本身的屬性，但是fixed和absolute都會把元素變成塊元素

overflow

1.overflow只能作用於塊級元素和替換元素

2.scroll和auto的表現在chrome上試驗的時候，發現是一樣的，只有在空間不夠的時候才顯示滾動條，在空間足夠的時候就不存在了

這個和某些文件所說不是很吻合，不過如果你想取得上述的效果，仍然建議用auto，畢竟這個是標準推薦的，而scroll應該是始終顯示滾動條的

clip

1.只支援長度值，不支援百分數；

2.目前為止也只支援rect，不支援其他圖形。

3.只能用於絕對定位的元素！！

4.不會改變內容區的形狀，只改變顯示內容的區域形狀

5.rect(top,right,bottom,left)的值不是邊偏移，而是根據左上角的定位，這個是和其他的css語法不一致的，說起來是乙個歷史問題了

當我們只是設定left和top為auto時，或者什麼都不設定，那麼絕對定位的元素會放置在就想static定位時候一樣，但是由於已經不佔空間了，所以別的元素有可能會和它發生覆蓋

非替換元素，如果沒有指定width和height，那麼元素的width設定為「收放的正好合適「，也就是元素的內容區的寬度恰好只能包含其內容（而沒有多餘空間）

考慮乙個定位元素的寬度和水平放置，有如下公式

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right === 包含塊的width

padding沒有auto值，所以不能被自動擴充套件或者縮小來滿足上述的等式，大部分情況下我們用margin的auto值來擴充套件

在定位中的屬性具有優先順序，優先順序低的會被強制重新計算，優先順序(書寫順序從左往右，如果從右往左的話，right>left)如下：

width = margin >left > right

經常用的絕對定位垂直居中的方案，top:0,bottom:0,margin:0 auto；height:???px就是採用上述的原理，高度設定一定後，我們只能通過擴大margin的值才能使得計算後相加的值正好是包含塊的高度，所以margin-top和margin-bottom會等分剩下的空間，水平居中也是一樣

替換元素的width如果是auto或者沒有設定，width的實際使用值是元內容的固有寬度，替換元素的定位其他方面和非替換元素一致

z-index只能應用於定位元素，什麼叫定位元素？就是除了static之外的所有定位值，並且沒有繼承值

1.如果沒有指定z-index，那麼預設的疊放順序是按照文件中出現的先後順序，後者在上，前者在下

2.一旦為乙個元素指定了z-index值，該元素就會建立自己的區域性疊放上下文，也就是它子元素的z-index是相對於它，而不是根據外部整個文件

3.css2.1有規定：元素絕對不會疊放在其疊放上下文的背景之下，也就是不會被background覆蓋，但是可以疊放在內容之下fixed定位和absolute定位可以看作一致，只不過固定元素的包含塊是視窗

注意一點，有時候我們會碰到過度受限的相對定位，比如我們設定了left:10px,又設定了right:10px，這明顯是矛盾的，我們不可能即往左邊移動10px，又往右邊移動過10px,css2.1有規定：如果遇到過度受限的相對定位，乙個值會重置為另乙個數的相反數,具體是哪個被重置看書寫方向

css中的定位

css中的定位

CSS中的定位

css中的定位

相關推薦