堆叠顺序

元素堆叠顺序简图

1. background
2. border
3. 块级
4. 浮动
5. 内联
6. z-index: 0
7. z-index: +
   如果是兄弟元素重叠，那么后面的盖在前面的身上。
   堆叠详解

堆叠上下文

可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。

1. 根元素 (HTML),
2. z-index 值不为 "auto"的 绝对/相对定位，
3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
4. opacity 属性值小于 1 的元素（参考 the specification for opacity），
5. transform 属性值不为 "none"的元素，
6. mix-blend-mode 属性值不为 "normal"的元素，
7. filter值不为“none”的元素，
8. perspective值不为“none”的元素，
9. isolation 属性被设置为 "isolate"的元素，
   position: fixed
10. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
11. -webkit-overflow-scrolling 属性被设置 "touch"的元素
    堆叠上下文详解
    通俗理解就是：一个堆叠上下文就是一个部门，同一个部门内的元素按照元素的堆叠顺序排列；不同部门的元素，也就是不同堆叠上下文内的元素的堆叠顺序要看各自部门的堆叠等级，如果A部门的等级高于B部门，则A部门元素的堆叠等级即使低于B部门中元素的堆叠等级，A部门的元素也能覆盖B部门中的元素，因为A的部门等级高于B部门，所以A部门中的所有元素都高于B部门。