CSS 堆叠上下文

堆叠顺序

1. background
2. border
3. 块级
4. 浮动
5. 内联
6. z-index: 0
7. z-index: +

如果是兄弟元素重叠，那么后面的盖在前面的身上。

触发堆叠上下文

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”的元素，
10. position: fixed
11. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
12. -webkit-overflow-scrolling 属性被设置 “touch”的元素

在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。