z-index不生效主因是父元素创建了堆叠上下文或子元素未设置定位；需检查父级是否触发堆叠上下文（如opacity<1、transform非none）、子元素是否设position为relative/absolute/fixed/sticky，并确保同层比较。
z-index 不生效？先确认是否进入了新的堆叠上下文
绝大多数 z-index 失效，根本不是值设小了，而是父元素悄悄创建了堆叠上下文，把子元素“关进盒子”里了。一旦某个元素触发了堆叠上下文（比如设置了 opacity 小于 1、transform 非 none、filter、will-change、isolation: isolate 等），它内部的 z-index 就只在自己内部比高低，不再和外部兄弟元素竞争。
实操建议：
- 用浏览器开发者工具检查目标元素的“Computed”面板，看
z-index是否被标记为 “(not applicable)” 或灰显——这通常意味着它不在一个定位上下文中，或其父级已隔离层级 - 逐级向上检查父元素是否设置了
transform: translateZ(0)、opacity: 0.99、filter: blur(1px)等隐式触发堆叠上下文的属性 - 临时移除可疑父元素的
transform或opacity，观察子元素z-index是否恢复作用
position 未设置或设错导致 z-index 被忽略
z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）有效。设成 static（默认值）时，无论写多少 z-index 都没反应，连警告都不会报。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 元素明明写了
z-index: 999，但始终被盖在下面 - 用 JS 动态添加样式后，
z-index突然失效——大概率是 JS 没同步设置position
实操建议：
- 在设置
z-index的同时，强制加上position: relative（最安全，不影响布局流） - 避免依赖继承：父元素有
position: relative，不代表子元素自动获得定位上下文；子元素自己必须显式声明position - 注意
sticky的边界限制：它只在滚动范围内生效，超出后会退化为relative，此时z-index行为可能意外变化
堆叠顺序被文档流或 flex/grid 排序覆盖
即使 z-index 正常生效，也可能被更底层的渲染规则压过：HTML 文档流顺序、flex 的 order、grid 的 z-index 等价属性（如 grid-row/grid-column 顺序）都会影响最终层叠结果。
使用场景：
- 两个同级
div，都设了position: absolute和z-index: 10，但后写的那个总在上面——这是文档流顺序在起作用（后出现的元素默认层叠等级更高） - Flex 容器中，
order: 2的子项即使z-index更高，视觉上仍可能排在order: 1后面，因为order影响绘制顺序
实操建议：
- 优先用
z-index控制层级，而非依赖 HTML 书写顺序；同一层级的兄弟元素，z-index值大的一定在上面（前提是没进入不同堆叠上下文） - 在 Flex/Grid 布局中，若需强控层级，确保所有参与比较的元素处于同一堆叠上下文，并显式设置
position+z-index - 慎用
z-index: auto：它会让元素不参与堆叠上下文排序，等同于没设，容易误判
移动端 Safari 和旧版 Chrome 的 z-index 兼容陷阱
iOS Safari（尤其 15.x 之前）和部分 Android WebView 对 z-index 的解析更严格：如果父容器是 position: fixed，且子元素用了 transform，就可能触发独立堆叠上下文，导致 z-index 在内部失效而不报错。
性能与兼容性影响：
-
transform: translateZ(0)常被用来开启硬件加速，但它也会创建堆叠上下文，和z-index形成冲突 - 某些安卓机型 Webview 中，
z-index超过 2147483647（32 位有符号整数上限）会回绕为负数，直接翻车
实操建议：
- 移动端调试必开真机 Safari 开发者工具，模拟器经常不复现真实堆叠行为
- 避免无意义的
transform：不要为了“加速”而加translateZ(0)，现代浏览器已优化多数动画场景 -
z-index值保持在0–999区间内足够日常使用；超过 2000 就该怀疑设计是否合理
堆叠上下文不是开关，是嵌套的盒子；你调的 z-index，永远只在最近的那个盒子里有效。查问题时，与其反复改数字，不如先打开开发者工具，点开那个父元素的“Computed”，看一眼 transform 和 opacity 是不是静悄悄地把你关进去了。
