定义
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
*注释
- z-index只对设置了position 属性为 relative, absolute 或者 fixed 的元素才生效.
- z-index 可以为负值
层级关系的比较规则
- 对于同级元素，正常流中的元素后面的会覆盖前面的。
<div class="box1">box1</div>
<div class="box2">box2</div>
-
对于同级元素，设置了定位同时设置了z-index的元素，z-index大的会覆盖z-index小的元素。
<div class="box1" style="position:relative; z-index:2">box1</div>
<div class="box2" style="position:relative; z-index:1">box2</div>
设置了定位的元素，会覆盖没有设置定位的元素或position为static的元素。
未设置z-index的元素不会参与层级关系的比较，而设置了z-index=0后，就会参与层级关系的比较，其位置就会在z-index为负数的同级元素的前面，在z-index为正数的同级元素的后面。
如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
对于父子元素，若父元素不设置z-index，那么子元素的z-index会生效，比如设置为负，就会在父元素下层。
- 子元素z-index跟随父元素
- 如果同级的A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.
- 如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.
