标准答案
- z-index 控制元素在 z 轴上的绘制顺序，但它不是全局排行榜。
- 常见情况下，z-index 要作用在定位元素上，比如 position 不是 static 的元素；flex item 和 grid item 也有特定规则。
- z-index 不生效，很多时候是因为元素不在同一个层叠上下文里比较。
- 层叠上下文是一组独立的绘制层级，子元素 z-index 再大，也只能在自己的层叠上下文内部比较。
- 排查时先找层叠上下文来源，比如定位加 z-index、fixed/sticky、opacity 小于 1、transform、filter、isolation、will-change、contain，再比较同层内的 z-index。
题目解析
这题的关键是“z-index 数字不是全局排行榜”。父级层叠上下文的位置决定了子元素能参与比较的范围。
很多弹窗被遮住，不是弹窗 z-index 小，而是弹窗挂载在了一个较低的层叠上下文里。工程上常把弹窗挂到 body 下统一管理层级。
代码示例
transform 会创建新的层叠上下文，内部子元素不能随意压过外部层级。
CSS
.parent {
transform: translateZ(0);
}
.child {
position: absolute;
z-index: 9999;
}常见误区
- z-index 不生效时只会加大数字，不查层叠上下文。
- 忽略 transform、opacity 会创建新的层叠上下文。
- 把 BFC 和层叠上下文混为一谈。