z-index仅对position为relative、absolute、fixed或sticky的元素生效；若父元素创建了层叠上下文（如非static+非auto z-index），子元素z-index仅在该上下文中比较，无法超越父级影响外部层级。
z-index 只对定位元素生效
最常见的情况是给一个普通 div 直接写 z-index: 999，但没加 position，结果完全没反应。CSS 规范明确规定：z-index 仅在元素的 position 值为 relative、absolute、fixed 或 sticky 时才有效。
- 写
position: static（默认值） →z-index被忽略 - 写
position: relative且无偏移 → 层级生效，但视觉位置不变 -
position: absolute和fixed同时触发定位与层叠上下文创建，影响更广
父容器创建了新的层叠上下文
即使子元素设置了很高的 z-index，如果它的某个祖先元素满足以下任一条件，就会形成独立的层叠上下文（stacking context），导致子元素的 z-index 只在这个小圈子内比较，无法越过父级去和外部兄弟元素争高低：
-
position非static+z-index为具体数值（非auto） -
opacity小于 1（如opacity: 0.99） -
transform不为none（如transform: translateZ(0)） -
will-change指定了影响层叠的属性 -
filter、perspective、isolation: isolate等
典型表现：弹窗 .modal 内部按钮层级正常，但整个弹窗被页面顶部导航栏盖住——大概率是导航栏父容器触发了层叠上下文，且其 z-index 高于弹窗容器本身。
z-index 数值比较只在同层叠上下文中进行
很多人以为“只要我写 z-index: 9999 就一定最大”，其实不是。两个元素是否能直接比大小，取决于它们是否属于同一个层叠上下文。
立即学习“前端免费学习笔记（深入）”；
- A 元素在根层叠上下文（即初始包含块），
z-index: 100 - B 元素在父容器 P 中，P 创建了新层叠上下文且
z-index: 10；B 自身设z-index: 9999 - 结果：B 整体仍被 A 覆盖，因为 P 的
z-index: 10z-index: 100，B 再高也出不去 P 的边界
调试建议：用浏览器开发者工具逐级检查「Computed」面板里的 stacking context 提示，或看 z-index 是否显示为灰色（表示被忽略）。
flex / grid 容器中的 z-index 行为差异
Flex 或 Grid 容器本身不会自动创建层叠上下文，但其子项（flex item / grid item）若设置了 position，z-index 依然生效。不过要注意一个易错点：
- 未定位的 flex item 之间按源顺序堆叠，
z-index无效 - 已定位的 flex item 若脱离文档流（如
position: absolute），则相对于最近的定位祖先定位，而非 flex 容器 - 想让 flex item 在容器内控层叠，必须设
position: relative（哪怕不偏移），再配z-index
.container {
display: flex;
}
.item {
position: relative; /* 必须加 */
z-index: 2;
}真正卡住人的往往不是 z-index 本身，而是它背后那套隐式、嵌套、依赖祖先状态的层叠规则。调的时候别只盯着目标元素，得顺着 DOM 往上翻两层，看有没有谁悄悄建了个“结界”。
