层叠上下文

定义

层叠上下文（Stacking Context）是 HTML 元素在假想 Z 轴上的三维概念模型，决定元素相互重叠时的显示顺序。每个层叠上下文内部的子元素按规则排序，整体作为一个单元参与父级上下文的层叠比较。

创建条件

常见创建方式包括：根元素 html；position 为 relative/absolute 且 z-index 不为 auto；position: fixed 或 sticky；opacity 小于 1；设置了 transform、filter、will-change、isolation: isolate 等属性的元素。

层叠顺序

同一上下文内大致顺序为：背景与边框、负 z-index、块级盒、浮动盒、行内盒、z-index: 0 及 auto、正 z-index，依次从下到上。

常见误区

z-index 并非全局比较：子元素的 z-index 再大，也无法超出其父级层叠上下文的整体层级。许多「z-index 不生效」的问题，根源都是元素处于不同的层叠上下文中。