CSS中z-index全解析
一、z-index解釋
z-index屬性決定了一個HTML元素的層疊級別，元素層疊級別是相對于元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。
在一個HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的：
- 具有負值的stacking contexts(層疊環境)元素，按照出現的先后順序排列（越靠后層級越靠上）;
- 沒有被定位，沒有浮動的塊級元素，按照出現的先后順序排列;
- 沒有被定位，有浮動的元素，按照出現的先后順序排列;
- 內聯元素，按照出現的先后順序排列排列;
- 被定位的元素，按照出現的先后順序排列;
- Z-index 屬性，當被正確使用的時候，會改變自然的層疊順序。
二、順序規則
如果不對節點設定 position 屬性, 位于文檔流后面的節點會遮蓋前面的節點.?
?
二、定位規則
2.1 如果將 position 設為 static, 位于文檔流后面的節點依然會遮蓋前面的節點浮動, 所以?position:static?不會影響節點的遮蓋關系.
<style> div{width: 200px; height: 200px;}.a{ background-color: red; position: static;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;}</style>
2.2 如果將 position 設為 relative (相對定位), absolute (絕對定位) 或者 fixed (固定定位), 這樣的節點會覆蓋沒有設置 position 屬性或者屬性值為 static 的節點, 說明前者比后者的默認層級高.
<style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;}</style>?
2.3 在沒有 z-index 屬性干擾的情況下, 根據順序規則和定位規則, 我們可以做出更加復雜的結構. 這里我們對 A 和 B 都不設定 position, 但對 A 的子節點 A-1 設定?position:relative. 根據順序規則, B 會覆蓋 A, 又根據定位規則 A-1 會覆蓋 B.
...<style>div{width: 200px; height: 200px;}.a{ background-color: red;}.a-1{width: 130px; height: 130px; background-color: blue; position: relative;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;} </style> </head> <body><div class="a">這里是A的內容<div class="a-1">A-1</div></div><div class="b">這里是B的內容</div> </body>
...
三、參與規則
不用 position 屬性, 在節點加上 z-index 屬性. z-index 對節點是不起作用的.
W3C 對 z-index 屬性的描述中提到 在 z-index 屬性僅在節點的 position 屬性為 relative, absolute 或者 fixed 時生效.
此處不做演示
四、默認值規則
如果所有節點都定義了 position:relative. z-index 為 0 的節點與沒有定義 z-index 在同一層級內沒有高低之分;
但 z-index 大于等于 1 的節點會遮蓋沒有定義 z-index 的節點; z-index的值為負數的節點將被沒有定義 z-index 的節點覆蓋.
...<style>div{width: 200px; height: 200px; position: relative;}.a{ background-color: red;}.b{ background-color: green; margin-top: -100px; margin-left: 100px; z-index: 1}.c{ background-color: yellow; margin-top: -100px; margin-left: 200px;}.d{ height: 450px; width: 450px; background-color: blue; color: #fff; margin-top: -400px; margin-left:0px; z-index: -1;} </style> </head> <body><div class="a">這里是A的內容</div><div class="b">這里是B的內容</div><div class="c">這里是C的內容這里是C的內容</div><div class="d">這里是D的內容這里是D的內容這里是D的內容</div> </body>
...
當 position設為 relative, absolute 或者 fixed, 而沒有設置 z-index 時, IE8 以上和 W3C 瀏覽器 (下文我們統稱為 W3C 瀏覽器) 的 z-index 默認值是 auto, 但 IE6 和 IE7 是 0.
五、從父規則
5.1 如果 A, B 節點都定義了 position:relative, A 節點的 z-index 比 B 節點大, 那么 A 的子節點必定覆蓋在 B 的子節點前面.?
...<style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative; z-index: 2;}.b{ background-color: green; margin-top: -100px; margin-left: 100px; position: relative; z-index: 1}.a-1,.b-1{ background-color: yellow; width: 160px; height: 120px;} </style> </head> <body><div class="a">這里是A的內容<div class="a-1">這里是A的子內容A-1</div></div><div class="b">這里是B的內容這里是B的內容<div class="b-1">這里是B的子內容B-1</div></div> </body>
...
5.2 如果所有節點都定義了 position:relative, A 節點的 z-index 和 B 節點一樣大, 但因為順序規則, B 節點覆蓋在 A 節點前面. 就算 A 的子節點 z-index 值比 B 的子節點大, B 的子節點還是會覆蓋在 A 的子節點前面.?
...<style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative; z-index: 1;}.b{ background-color: green; margin-top: -100px; margin-left: 100px; position: relative; z-index: 1}.a-1,.b-1{ width: 160px; height: 120px; position: relative;}.a-1{ background-color: yellow; z-index: 999;}.b-1{ background-color: blue;} </style> </head> <body><div class="a">這里是A的內容<div class="a-1">這里是A的子內容A-1</div></div><div class="b">這里是B的內容這里是B的內容<div class="b-1">這里是B的子內容B-1</div></div> </body>
...
很多人將 z-index 設得很大, 9999 什么的都出來了, 如果不考慮父節點的影響, 設得再大也沒用, 那是無法逾越的層級. ?
六、層級樹規則
可能你會覺得，在 DOM 結構中的兄弟節點會拎出來進行比較并確定層級, 其實不然.
... <style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative; z-index: 2;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;}.a-1,.b-1{ width: 160px; height: 120px;}.a-1{ background-color: yellow; position: relative; z-index: 0;}.b-1{ background-color: blue; position: relative; z-index: 1; } </style> </head> <body><div class="a">這里是A的內容<div class="a-1">這里是A的子內容A-1</div></div><div class="b">這里是B的內容這里是B的內容<div class="b-1">這里是B的子內容B-1</div></div> </body> ...我們認為同時將 position 設為 relative, absolute 或者 fixed, 并且 z-index 經過整數賦值的節點, 會被放置到一個與 DOM 不一樣的層級樹里面, 并且在層級樹中通過對比 z-index 決定顯示的層級. 上面的例子如果用層級樹來表示的話, 應該如下圖所示.
圖中雖然 A-1 (z-index:0) 的值比 B-1 (z-index:1) 小, 但因為在層級樹里 A (z-index:2) 和 B-1 在一個層級, 而 A 的值比 B-1 大, 根據從父規則, A-1 顯示在 B-1 前面.?
七、參與規則 2
前面提到的參與規則認為只要節點的 position 屬性為 relative, absolute 或者 fixed, 即可參與層級比較, 其實不準確. 如果所有節點都定義了 position:relative, 并且將 z-index 設為整數值, 根據從父規則, 父節點的層級決定了子節點所在層級.
例子中 A, B-1, C 作為父節點, z-index 的值相同, 根據順序規則, C 在 B-1 之前, B-1 在 A 之前; 又根據從父規則, 無論子節點的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.
如果我們將所有父節點的 z-index 屬性去除, 詭異的事情發生了. IE6 和 IE7 瀏覽器顯示效果不變, 而 W3C 瀏覽器的子節點不再從父, 而是根據自身的 z-index 確定層級.
根據默認值規則, IE6 / IE7 和 W3C 瀏覽器上的元素存在 z-index 默認值的區別. 我們相信, 僅當 position 設為 relative, absolute 或者 fixed, 并且 z-index 賦整數值時, 節點被放置到層級樹; 而 z-index 為默認值時, 只在 document 兄弟節點間比較層級. 在 W3C 瀏覽器中, A, B-1 和 C-1-1 的 z-index 均為 auto, 不參與層級比較.
而在 IE6 和 IE7 中, 因為 z-index 的默認值是 0, 所以也參與了層級比較.
設置了 position 而沒有 z-index 的節點雖然不參與層級樹的比較, 但還會在 DOM 中與兄弟節點進行層級比較.
我們對上個例子改造一下, 將 B-1 的 position 屬性刪除后, W3C 瀏覽器顯示如下圖. 根據定位規則, A 和 C 會顯示在 B-1 的前面; 而根據順序規則, C 又顯示在 A 前面.?
在 IE6 和 IE7 中, 因為 A 和 C-1-1 設置了?position:relative, 而且 z-index 的默認值為 0, 所以也參與層級樹比較, 所以有如下效果.
轉自：http://www.xiaoxiangzi.com/Programme/CSS/7884.html
轉載于:https://www.cnblogs.com/lvmylife/p/5391818.html
總結
以上是生活随笔為你收集整理的CSS中z-index全解析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RMAN backup validate
- 下一篇： 移动端webP调研