什么是层叠上下文

层叠上下文，是HTML中的一个三维概念，当一个元素中包含有多个元素，且这些元素都在同一个坐标位置上，这就称之为层叠上下文。

什么是层叠等级

也称层叠级别、层叠水平

指的是同一个层叠上下文中，当前层叠元素在Z轴的上下顺序，而在普通元素上，描述普通元素在Z轴上的上下顺序

这里要解释下，为什么要区别普通元素的层叠上下文中的元素，因为普通元素的层叠等级优先级由层叠上下文决定，因此，层叠登记的比较只有在当前层叠上下文元素中才有意义

::: warn

需要注意的是，需要把层叠登记和CSS的z-index混乱了，z-index是可以影响层叠水平，前提是元素必须是定位元素/flex子元素，而层叠等级是只有元素都存在的

:::

什么是层叠顺序

当元素发生层叠时，层叠顺序会遵循图中的顺序显示。

需要注意的是 inline/inline-block元素的层叠顺序是要高于block和float元素的 z-index属性是auto/0时，它们是在同一个层级的，此时就遵循先来后到准则

inline元素比block和float元素要高是有原因的，通常inline元素（p标签，span标签这些都是inline元素）都是用来渲染文字内容的，而文字是一个页面中最重要的内容之一，当发生层叠关系时，文字当然要在前面让用户优先看到。

层叠准则

层叠领域的覆盖关系主要遵循以下两条

• z-index较大的一方覆盖小的
• 层叠水平和顺序一致时，在DOM中处于后面的元素会覆盖前面的元素

产生层叠上下文

在产生层叠上下文的前提需要一些特定的CSS属性创建，一般有3种方法

• HTML元素是根层叠上下文
• 普通元素需要设置非static值并且设定z-index数值才能产生层叠上下文
• 使用Css3中的新属性也可以产生层叠上下文

例如下面这个例子，通过元素的先后顺序，产生了元素层叠上下文

<div>
  <div class="a">a</div>
  <div class="b">b</div>
</div>
<div>
  <div class="c">c</div>
</div>

div>div{
  width:100px;
  height:100px;
}
.a{
  background:red;
  position:absolute;
  left:10px;
  top:10px;
}

.b{
  background:pink;
  position:absolute;
  left:70px;
  top:70px;
}
.c{
  background:blue;
  position:absolute;
  left:130px;
  top:130px;
}

preview

在修改一下，把b元素的的zIndex属性修改下比其他元素要高。

.b{
  background:pink;
  position:absolute;
  left:70px;
  top:70px;
  z-index:100;
}

可以看到，zIndex属性影响到了其他层叠上下文元素。

Css3属性对层叠上下文影响

在CSS3中，出现了很多新属性，有一部分属性对于层叠上下文也会产生影响，例如下面这些

• 父级元素的display为flex或者inline-flex，子元素设置了z-index时，子元素产生层叠上下文(grid也是)
• opacity属性小于1
• mix-blend-mode属性值不为normal的元素
• 不为none的元素
  • transform
  • filter
  • backdrop-filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• isolation属性为isolation的元素
• 设置了will-change属性