z-index不生效的根本原因是元素未被“激活”定位或受堆叠上下文限制；必须设置position为relative/absolute/fixed/sticky，且比较仅在同一堆叠上下文中有效。
z-index 不生效，根本原因不是数字不够大，而是它压根没被“激活”——定位属性没设对，或者层级关系被堆叠上下文悄悄截断了。
定位属性必须是非 static
z-index 只对 已定位元素起作用。也就是说，元素的 position 必须是 relative、absolute、fixed 或 sticky。如果还是默认的 static，哪怕写 z-index: 99999，浏览器也直接忽略。
- 检查目标元素是否漏写了
position，或误写成position: static - 浮动（
float）不会触发定位，也不能让 z-index 生效；需额外加position: relative等 - 内联元素（如
）即使加了定位，也要注意是否需要配合display: inline-block或block才能正常占位和层叠
父级创建了独立堆叠上下文
z-index 的比较只在同一个堆叠上下文内有效。一旦父元素触发了新堆叠上下文（比如设置了 opacity: 0.99、transform: scale(1)、filter: blur(0)、will-change: transform 等），它的子元素再高的 z-index，也无法突破这个“结界”盖过兄弟容器里的内容。
- 用浏览器开发者工具的“Computed”面板查看目标元素的
stacking context是否被标记为 “Yes” - 临时注释掉父级可能触发堆叠上下文的 CSS 属性（尤其是 opacity、transform、filter），确认是否由此导致
- 若必须保留这些效果，可将需要前置的元素“提级”——移到更高层的共同父容器下，脱离干扰上下文
兄弟元素不在同一层级比较
两个元素能否靠 z-index 比出前后，取决于它们是否属于同一个父容器下的定位兄弟节点。如果 A 和 B 分属不同父级，而 A 的父级 z-index 很小，那 A 再怎么调高自己的 z-index，也盖不过 B 所在的整个父块。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 结构：想让弹窗盖过导航栏？确保弹窗和导航栏的最近公共父级本身是定位的，且该父级的 z-index 足够高
- 常见陷阱：一个弹窗嵌在
.content里，而顶部导航是.header，两者平级但父级无定位 → 它们各自形成默认堆叠上下文，z-index 互不影响 - 解决方案：给
.header和.content都加上position: relative并设置合理 z-index（如 header=100，content=10），再统一管理子元素层级
其他容易忽略的干扰项
有些看似无关的样式，会悄悄破坏 z-index 的预期行为。
-
overflow: hidden或display: none的父级，会让绝对定位子元素“被裁剪”或“不渲染”，此时调 z-index 也没意义 -
iframe、、原生弹窗（如alert()）有系统级优先级，z-index 再高也盖不住 - 不要盲目堆数字：z-index 值过大（如 999999）虽不报错，但易引发维护混乱和意外覆盖；建议按模块划分区间（如 10~90 用于基础布局，100~190 用于弹窗，200+ 用于全局提示）
