【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/