【CSS疑難雜症】z-index 層級樹

CSS 中的 z-index 屬性用於設置節點的堆疊順序, 擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面, 這是我們對 z-index 屬性普遍的認識。其實不然，這就是爲什麼要介紹z-index 層級樹的概念。

幾條結論

1. 對於同級元素, 默認 (或 position:static) 情況下文檔流後面的元素會覆蓋前面的
2. position 設爲 relative 、absolute、fixed (固定定位), 這樣的節點會覆蓋沒有設置 position 屬性或者屬性值爲 static 的節點
3. 對於同級元素, position 不爲 static 且 z-index 存在的情況下 z-index 大的元素會覆蓋 z-index 小的元素, 即 z-index 越大優先級越高
4. 如果所有節點都定義了 position:relative, z-index 爲 0 的節點與沒有定義 z-index 在同一層級內沒有高低之分; 但 z-index 大於等於 1 的節點會遮蓋沒有定義 z-index 的節點; z-index 的值爲負數的節點將被沒有定義 z-index 的節點覆蓋

幾個實例

1. 結論2實例 : position 設爲 relative 、absolute、fixed (固定定位), 這樣的節點會覆蓋沒有設置 position 屬性或者屬性值爲 static 的節點

   <div id="a">
       <div id="a-1" style="position:relative;">A-1</div>
   </div>
   <div id="b">B</div>

2. 結論3實例

   <div id="a" style="position:relative;z-index:0;">
       <div id="a-1" style="position:relative;z-index:100;">A-1</div>
   </div>
   
   <div id="b">
       <div id="b-1" style="position:relative;z-index:0;">
           <div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
       </div>
   </div>
   
   <div id="c" style="position:relative;z-index:0;">
       <div id="c-1">
           <div id="c-1-1">
               <div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
           </div>
       </div>
   </div

3. 結論4實例 : 如果所有節點都定義了 position:relative, z-index 爲 0 的節點與沒有定義 z-index 在同一層級內沒有高低之分; 但 z-index 大於等於 1 的節點會遮蓋沒有定義 z-index 的節點; z-index 的值爲負數的節點將被沒有定義 z-index 的節點覆蓋

   <div id="a" style="position:relative;z-index:1;">A</div>
   <div id="b" style="position:relative;z-index:-1;">B</div>
   <div id="c" style="position:relative;">C</div>
   <div id="d" style="position:relative;z-index:0;">D</div>

注意

另外, 非情非得已, 切勿用 JavaScript 計算 z-index, 並將某個節點的 z-index 設置成所有節點中層級最高

參考

[1] http://www.neoease.com/css-z-index-property-and-layering-tree/