CSS空间属性z-index

在CSS中，z-index用于调整定位时重叠快的上下位置，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index属性值为整数，也可以是正数，也可以是负数。如果为正数，则离用户更近，为负数则表示离用户更远。

注意： z-index 仅能在定位元素(position:absolute, position:relative, or position:fixed)上使用

z-index属性值 

1.   z-index只有在节点设置了position属性后，才能发挥作用，在有positon的情况下，z-index:n，n越大，层级越高，此时依赖 z-index 的层叠上下文元素的层叠顺序取决于 z-index 值

2.  定位元素的 z-index默认值为 auto，而不是0；z-index:auto和z-index:0处于同一层级，没有高低之分。而且定位元素会覆盖普通元素: 因为z-index:auto,会覆盖 inline 或者 inline-block 元素。

3.   父子元素在不设置 z-index 的情况下，默认子元素的层级会比父元素层级高，即使父元素的 z-index 设置的比子元素的大，子元素的层级依然比父元素的层级高。

4.   同一层叠上下文，层叠级别大的显示在上面，级别小的显示在下。层叠级别中的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。

5.  元素处于不同的层叠上下文中，根据父级的z-index大小来确定层级，与自身的层叠级别无关。

著名的七阶层叠水平