层叠顺序

层叠顺序描述同一个层叠上下文中背景、边框、普通流内容、浮动、定位元素和子层叠上下文的绘制关系。它不是简单按 DOM 顺序，也不是只比较 z-index；先确定所在上下文，再按阶段比较。

.stage { position: relative; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.stage > .content { position: relative; z-index: 0; }

负 z-index 仍然受父上下文和背景绘制边界限制；伪元素、浮动和定位元素参与不同阶段。遇到遮挡问题时，先用 DevTools 的 Layers/Elements 面板确认元素、上下文和绘制阶段，再改数字。

变化一个条件观察边界

给一个父元素设置背景色，再把负层叠子元素放进去，观察它是否落到父背景后面。把父元素改为新的 stacking context 后重新测试，记录可见区域和裁剪边界的变化。

实验与练习

创建背景、浮动卡片、定位徽章和伪元素装饰组成的场景。逐一调整 DOM 顺序、z-index、opacity 和 transform，写出一张“元素所在上下文—绘制阶段—最终顺序”表。

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

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

常见错误

• 认为后写的 DOM 永远盖住先写的元素。
• 只增加 z-index，不确认元素是否定位或所在上下文。
• 使用负层叠值时忘记父背景和裁剪边界。

继续阅读

最后把父子上下文和组件覆盖问题落到 z-index：z-index 与父子层叠。

练习

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

查看本节答案