z-index 为什么有时不生效？什么是层叠上下文？
简化版
z-index 只在层叠上下文里比较，元素一旦被父级的 transform、opacity、position + z-index 等条件创建了新的层叠上下文，它和外部元素就不是直接比较大小了。所以 z-index 不生效时，通常不是数字不够大，而是比较范围错了。
详细版
- z-index 控制的是当前层叠上下文内的层级顺序，不是全页面绝对顺序。
- position 非 static 且设置 z-index、opacity 小于 1、transform、filter、isolation 等都会创建新的层叠上下文。
- 子元素的 z-index 再大，也只能在父层叠上下文内部参与排序。
- 排查时要沿 DOM 向上找最近的 stacking context，而不是盲目写 9999。
- 工程上建议建立弹层层级规范，例如 dropdown、modal、toast、tooltip 使用统一 token。
完整版教学
记忆钩子：z-index 比的是“同一个房间里的座次”，不是整栋楼里的绝对高度。
一、这题真正考什么
记忆钩子：z-index 比的是“同一个房间里的座次”，不是整栋楼里的绝对高度。
面试官不是只想听定义，而是想看你能不能把 CSS 规则、浏览器渲染、工程维护和用户体验连起来。回答这类题时，先讲机制，再讲例子，最后讲排查方法和边界。
二、底层机制怎么理解
层叠上下文是浏览器在 z 轴上组织元素绘制顺序的隔离单元。一个元素创建层叠上下文后，它的所有子元素先在内部排好顺序，再作为一个整体参与父级上下文排序。这样可以让复杂页面的绘制规则保持确定性，但也会让开发者误以为 z-index 数字越大越靠上。
CSS 面试题的关键通常在“规则为什么这样生效”。只要能讲清浏览器按什么顺序匹配、计算、布局和绘制，就不会停留在背属性名的层面。
三、带数字的小推演
父元素 A 设置 transform: translateZ(0) 创建层叠上下文，父元素 B 设置 z-index: 10。A 内部子元素即使写 z-index: 9999，如果 A 自己在父级上下文里低于 B，子元素也压不过 B。
下面把判断过程压成几条可复用规则，面试时可以直接照这个顺序推：
比较层级时先比较所在 stacking context
同一上下文：z-index 大的在上；z-index 相同时按绘制规则和 DOM 顺序
不同上下文：先比较父上下文里的父元素顺序，子元素不能越级竞争四、浏览器处理流程
可以把它放进浏览器处理链路里看：
页面根层叠上下文
|
父元素 A：transform 创建局部上下文
| |
| A-child: z-index 9999，只在 A 内部比较
|
父元素 B：z-index 10
|
最终先比较 A 和 B，再看各自内部流程图能帮你避免两个常见问题：一是把 CSS 属性当成孤立开关，二是忽略父级、上下文和渲染阶段的影响。真正排查线上样式问题时，沿流程定位通常比随机改 CSS 更快。
五、对比表格
| 触发条件 | 是否常见 | 典型场景 |
|---|---|---|
| position + z-index | 高 | 弹层、定位布局 |
| opacity < 1 | 高 | 淡入动画 |
| transform/filter | 高 | 动画、硬件加速 |
| isolation: isolate | 中 | 主动隔离层级 |
| flex/grid item + z-index | 中 | 组件内部排序 |
对比题不要只背结论，要主动补一句“适合什么场景”。CSS 的很多选择没有绝对优劣，只有是否符合布局、可维护性、性能和可访问性目标。
六、工程实践和排查思路
- 盲目把 z-index 加到 9999 会污染全局层级系统，也不一定能解决跨上下文问题。
- 动画里加 transform 可能无意创建层叠上下文，让原本正常的弹层被遮住。
- 使用 DevTools 时要同时看 matched rules、computed style、layout、accessibility 和 event listeners，避免只盯着源码。
- 组件库项目要把这类规则沉淀成 token、基础样式或 lint 约束，否则同类问题会反复出现。
七、常见误区与追问
- 误区：z-index 数字越大就一定越靠上。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：只有定位元素才可能参与层级排序。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：z-index 不生效就应该继续加大数值。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 追问：哪些属性会创建层叠上下文？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：modal、toast、tooltip 的层级应该如何治理？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：为什么 transform 会影响 fixed 元素的表现？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
八、加强记忆
先找“房间”，再比“座次”。排查 z-index 问题时，从目标元素一路向上找层叠上下文，确认它和遮挡元素是否在同一个比较范围里。
复习 HTML/CSS 高频题时，可以固定按“定义、触发条件、浏览器流程、代码例子、工程风险、排查工具”六步组织答案。这样不会只停留在背概念，也更像真实前端开发者。