z-index 与父子层叠

z-index 比较的是同一层叠上下文中的排序位置。子元素的 z-index 只能决定它在自己上下文中的顺序，不能越过父级上下文与另一个兄弟上下文直接比较。

.app { position: relative; z-index: 0; }
.drawer-shell { position: relative; z-index: 2; }
.tooltip { position: absolute; z-index: 100; }
.dialog-shell { position: relative; z-index: 3; }

如果 tooltip 在 drawer-shell 内，它的 100 仍然整体属于 2 这一层；dialog shell 的 3 可以盖住整个抽屉。可维护的层级系统应在少数父级上下文定义角色，而不是在每个子元素随机增加数字。

实验与练习

实现抽屉、提示框和模态框三个层级。先把数字写成 1、2、3，再在子元素中写一个更大的值，验证它不能越过父上下文。最后移除一个祖先的 transform 或 opacity，记录上下文树和结果如何变化。

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

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

常见错误

• 用无限增大的数字代替层级设计。
• 把 BFC、包含块和 stacking context 混成同一张图。
• 只修改子元素，不调整真正决定层级的父容器。

本章回顾

BFC 管布局隔离，层叠上下文管绘制隔离；z-index 只在同一上下文内比较。下一章进入现代 CSS 特性，把层、变量、计算和容器查询用于可维护组件。

进入第七章：现代 CSS 特性

练习

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

查看本节答案