CSS的z-index属性

之前以为z-index越大，它的层级就越高，从我遇到的bug来看很显然不是这样。重新回顾一下z-index的知识：

1、z-index只对定义了position属性的，且属性值是非static元素有效。它的默认值是auto，auto的意思是游览器自动进行排序。

2、元素的显示顺序是有其层叠上下文、层叠等级决定的。

这里我们使用代码解释一下什么是层叠上下文和层叠等级：

div {
    position: absolute;
    left: 20px;
    width: 500px;
    height: 500px;
}
.box1 {
    background-color: red;
    z-index: 1;
}
.box1child {
    z-index: 50;
    background-color: aqua;

}
.box2 {
    left: 90px;
    background-color: black;
    z-index: 2;
}

<div class="box1">
    <div class="box1child"></div>
</div>
<div class="box2"></div>

box1和box2的层叠上下文环境是相等的，这样的情况下谁的z-index大，谁在上面，如果相等后面的会覆盖前面的。 

box2和box1child的层叠等级是不同的，虽然box1child的z-index即便是50那么也不会高于box2。但也不是绝对的，如果父节点的z-index是auto，那么它的子节点就会超越box2。但如果父节点的z-index是0，那么子节点超越不了box2，所以z-index：0 不等于 z-index：auto。

下面是结果演示：

box1 ：z-index = 0   box1child：z-index = 50    box2：z-index= 2

box1 ：z-index = auto   box1child：z-index = 50    box2：z-index= 2

 

 3、总结一下我遇到的坑：

  如果两个元素A、B的层级不一样，A使用z-index = 999999依然在B的下面，首先检查A的父元素有没有设置z-index，有的话值改成auto即可，没有的话就查看有没有overlow：hidden属性，气死我了。