z-index的作用

很多時候需要把一個元素覆蓋到另一個元素之上，比如登入彈出框等，這個時候就需要z-index屬性出場了。所以呢，z-index就是調節層的顯示優先級，決定哪個顯示在最上方。作用范圍就是Positioned element，比如絕對定位，相對定位，固定定位。

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

先看下面的關系圖： 這是效果： 我們會發現雖然DIV4的index最大，但是它還是被別的元素覆蓋了，這是為什么呢？ 簡單的理解就是z-index在不同的地方有不同的權重，在最高級（root）權重最高，相鄰元素（sibling）嵌套一層權重就低一級。對于上面的例子我們可以這么計算：

DIV1--->5

DIV2--->2

DIV3--->4

DIV4--->4.6

DIV5--->4.1

DIV6--->4.3

這樣計算一般的z-index嵌套就OK啦。

不用z-index的堆疊（stacking）

兩條原則：

沒有指定z-index值的positioned element，他們的堆疊順序取決于在HTML文檔中的順序，越靠后出現的元素，位置越高；

非positoned element元素，不管在HTML中出現的順序如何，總是在positioned element元素下方；

例子：

層疊與浮動之間的關系

non-positioned block的背景和邊界沒有被浮動元素影響，但是元素中的內容被浮動元素影響了（浮動布局的之后注意這個特性）。 層疊順序：

根元素的背景和邊界；

在普通流中的子代元素；

浮動元素；

普通流中的內聯子代元素；

定位了的元素；

例子：

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的數值可以很方便的判斷當前元素位于哪一層。

既定位了然后也浮動

浮動和相對定位可以一起使用； 浮動和絕對定位不能一起使用（浮動不起任何作用）。

參考：

z-index

The stacking context?（重點）

Stacking without z-index

Stacking and float

Rational Z-Index Values

轉載于:https://www.cnblogs.com/technology-life/p/4537609.html

總結

以上是生活随笔為你收集整理的关于z-index的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。