CSS层叠上下文、层叠等级、层叠顺序、z-index

层叠上下文(stacking context):
是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖

层叠等级(stacking level):
在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序

普通元素的层叠等级优先由其所在的层叠上下文决定。
层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。

如何产生“层叠上下文”:(3种)
HTML中的根元素本身j就具有层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
CSS3中的新属性也可以产生层叠上下文。

层叠顺序：
表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示

判断方式：
1、首先先看要比较的两个元素是否处于同一个层叠上下文中： 1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。 1.2如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。 2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

CSS3中的属性对层叠上下文的影响

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
元素的opacity属性值不是1；
元素的transform属性值不是none；
元素mix-blend-mode属性值不是normal`；
元素的filter属性值不是none；
元素的isolation属性值是isolate；
will-change指定的属性值为上面任意一个；
元素的-webkit-overflow-scrolling属性值设置为touch。