堆叠上下文(The stacking context)

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
在增加 z-index 的例子中, 某些 DIV 的渲染顺序是由 z-index 的值影响的。这是因为这些 DIV 具有使他们形成一个层叠上下文的特殊属性。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

根元素 (HTML),
z-index 值不为 "auto"的绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）
-webkit-overflow-scrolling 属性被设置 "touch"的元素

通俗一点，狗仗人势，如果改变了堆叠上下文，那么就得观外层的Z-index。

<div class="a">
    <div class="a1">
    </div>
</div

<div class="b">
    <div class="b1">
    </div>
</div
------------------分割-----------------
.a{
    position:realitve;
    z-index:1
}
.a1{z-index:999}
.b{
    position:realitve
    z-index:1  //只要>= a的z-index
}
.b1{z-index:0}

无论.a1中z-index是多少也比b1层级低，有大佬罩着我懂不？就4这么牛逼

堆叠顺序

默认html为堆叠上下文时

如果是兄弟元素重叠，那么后面的盖在前面的身上。
加了堆叠上下文后，-z-index会改变，我们用一个比喻来理解，加了堆叠上下文后，我们成立了一个二级部门，先前的一级部门比较松散，可以随意走动，现在我们的二级部门的底线就是background，无论如后你都逃不出去，所以无论z-index等于多少等会他们上面！