层级关系的比较
1. 对于同级元素，默认情况下(或position:static)， 文档流后面的元素会覆盖前面的。
2. 对于同级元素，position不为static 且z-index存在的情况下，z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。
3. z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。
 
 
参与规则
z-index 属性仅在节点的 position 属性为 relative, absolute, fixed 时生效.
<div id="a" style="z-index:2;">A</div>
<div id="b" style="position:relative; z-index:1;">B</div>
<div id="c" style="position:relative; z-index:0;">C</div>

 B有position属性，z-index值比C大，所以B覆盖C；而A虽然是2但失效。

 

默认值规则
如果所有节点都定义了 position:relative, z-index 为 0 的节点与没有定义 z-index的节点，在同一层级内没有高低之分;（按顺序规则）
 
从父规则
1.如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.
2.如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 子节点的 z-index 值比 B 子节点的大, B 的子节点还是会覆盖在 A 的子节点前面.（要考虑父节点）
 
 

 

 
 
 
如果将 position  属性设为 relative, absolute, fixed ，这样的节点会覆盖没有设置 position 属性或者属性为 static 的节点，说明前者比后者的默认层级高。
<div id="a" style="position:relative;">A</div>  
<div id="b">B</div>            <!--A覆盖B-->
 
在没有 z-index 属性干扰的情况下, 根据顺序和定位规则, 我们可以做出更加复杂的结构.
这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A-1 会覆盖 B.
<div id="a">
    <div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

以上常用于， 电子商务网站侧栏的类目展示列表。
 
二级类目的悬浮层覆盖一级类目列表外框, 而一级类目的子节点覆盖二级类目的悬浮层.
如果使用 CSS 实现展示效果, 一级类目的外框相当于上面例子中的 A, 一级类目的节点相当于 A-1, 二级类目的悬浮层相当于 B.