层叠上下文的形成

层叠上下文是独立的绘制排序环境。根元素、定位并设置 z-index 的元素、opacity 小于 1、transform 非 none、某些 containment 和 isolation 属性都可能建立它。子上下文内部的数字不能直接与外部兄弟比较。

.modal-shell { position: relative; z-index: 10; }
.modal { position: absolute; z-index: 1; }
.backdrop { position: relative; z-index: 20; }

如果 .modal-shell 所在的上下文整体低于 .backdrop，即使 .modal 写了很大的 z-index，也不能越过父级边界。transform: translateZ(0)、opacity 和滤镜有时为了性能或视觉效果无意中创建新上下文，排错时要查看 Computed 样式和祖先链。

实验与练习

建立两个兄弟容器，各自包含带 z-index 的子元素。给其中一个祖先增加 transform 或 opacity，尝试用子元素的不同数字改变覆盖关系，记录哪一次数字没有跨出父级上下文。

可运行微实验：隔离布局与绘制层级

创建两个相邻容器，分别用 display: flow-root、overflow: auto、position、transform 和 z-index 改变格式化上下文。记录外边距是否折叠、浮动是否被包住、子元素 z-index 是否能越过新的 stacking context，不能只凭视觉猜测。

常见错误

• 把 z-index: 999999 当成全局最上层。
• 只检查目标元素，不检查祖先是否形成上下文。
• 为了“加速”随意使用 transform，改变原有绘制边界。

继续阅读

下一篇按绘制阶段梳理谁先谁后：层叠顺序。

练习

1. 用最小输入复现“层叠上下文的形成”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案