堆叠上下文

1、堆(层)叠上下文是什么？

官方解释：层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

一些属性会触发堆叠上下文，堆叠上下文的定义不清楚。层叠上下文由满足以下任意一个条件的元素形成：

①根元素 (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 值只在父级层叠上下文中有意义。如果a的父层级比b的父层级高，那么a中的所有元素都比b中元素层级高(z-index值无效)。

---

2、堆(层)叠顺序

①background、②border、③块级、④浮动、⑤内联、⑥z-index: 0、⑦z-index: +

如果是兄弟元素重叠，那么后面写的覆盖前面写的。