關於z-index的總結

z-index的做用

不少時候須要把一個元素覆蓋到另外一個元素之上，好比登入彈出框等，這個時候就須要z-index屬性出場了。因此呢，z-index就是調節層的顯示優先級，決定哪一個顯示在最上方。做用範圍就是Positioned element，好比絕對定位，相對定位，固定定位。

層疊上下文（The stacking context）中的z-index

先看下面的關係圖：

 

這是效果：

 

 

 

咱們會發現雖然DIV4的index最大，可是它仍是被別的元素覆蓋了，這是爲何呢？

 

簡單的理解就是z-index在不一樣的地方有不一樣的權重，在最高級（root）權重最高，相鄰元素（sibling）嵌套一層權重就低一級。對於上面的例子咱們能夠這麼計算：

1. DIV1--->5
2. DIV2--->2
3. DIV3--->4
4. DIV4--->4.6
5. DIV5--->4.1
6. DIV6--->4.3

這樣計算通常的z-index嵌套就OK啦。

不用z-index的堆疊（stacking）

兩條原則：

1. 沒有指定z-index值的positioned element，他們的堆疊順序取決於在HTML文檔中的順序，越靠後出現的元素，位置越高；
2. 非positoned element元素，無論在HTML中出現的順序如何，老是在positioned element元素下方；

例子：

層疊與浮動之間的關係

non-positioned block的背景和邊界沒有被浮動元素影響，可是元素中的內容被浮動元素影響了（浮動佈局的以後注意這個特性）。

 

層疊順序：

1. 根元素的背景和邊界；
2. 在普通流中的子代元素；
3. 浮動元素；
4. 普通流中的內聯子代元素；
5. 定位了的元素；

例子：

z-index數值分配

隨便打開一個網站的首頁，查看源碼以後發現，z-index的數值亂七八糟，那應該怎麼用合適呢？

 

我採起的辦法是，把100設置爲1檔，若是須要堆疊三個層，從上到下分別是DIV3，DIV2，DIV1。那麼DIV1的z-index賦值爲100，DIV2的z-index賦值爲200，DIV3的z-index賦值爲300，這樣若是未來在DIV1和DIV2之間加入一層的話還有不少餘量能夠選擇。若是三個之間不留空隙的話之後插入一個新層就不方便啦。這樣還有一個好處，就是經過查看z-index的數值能夠很方便的判斷當前元素位於哪一層。

既定位了而後也浮動

浮動和相對定位能夠一塊兒使用；

浮動和絕對定位不能一塊兒使用（浮動不起任何做用）。

參考：

1. z-index
2. The stacking context （重點）
3. Stacking without z-index
4. Stacking and float
5. Rational Z-Index Values