层叠上下文 (Stacking Context)

层叠上下文是 HTML 元素的三维概念，它决定了元素在 $Z$ 轴（用户视线方向）上的排列顺序。

核心概念

在 CSS 中，并不是 z-index 越大越靠前。元素的显示顺序是由层叠上下文、层叠水平和层叠顺序共同决定的。

一个元素并不会自动产生层叠上下文，除非满足以下任一条件：

文档根元素 (<html>)。
定位属性：position 为 absolute 或 relative，且 z-index 不为 auto。
固定/粘性定位：position: fixed 或 sticky。
Flex/Grid 子元素：父级为 display: flex | grid，且子元素的 z-index 不为 auto。
CSS3 新属性：
- opacity 小于 1。
- transform 不为 none。
- filter、perspective、clip-path 不为 none。
- will-change 指定了上述属性(opacity, transform, filter等)。

同级比较：在同一个层叠上下文中，z-index 越大越靠上。
跨级比较：如果两个元素处于不同的层叠上下文中，先比较它们各自所属的父级层叠上下文。
- 案例：如果 A 元素的父级层叠上下文 z-index 是 1，B 元素的父级层叠上下文 z-index 是 2，那么无论 A 的 z-index 设置到 $9999$，它也永远在 B 的下面。

当元素都在同一个层叠上下文中时，遵循以下顺序：