z-index不生效的主因是元素未定位或父容器创建了堆叠上下文；需确保position为relative/absolute/fixed/sticky，且检查父级是否因opacity、transform等触发新堆叠上下文。
z-index 不生效，先看元素有没有定位
很多情况下 z-index 看似写了却没反应，根本原因是它只对「已定位元素」起作用——也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。默认的 static（也是初始值）完全无视 z-index。
常见错误现象：
– 给一个普通 div 直接写 z-index: 999，但没加 position
– 用 display: flex 或 grid 布局后误以为子项自动可叠层
– 在 Vue/React 中动态添加 class，但漏掉了对应的定位声明
实操建议：
– 检查浏览器开发者工具里该元素的 computed 样式，确认 position 不是 static
– 最小验证：临时加上 position: relative（不影响布局）再试 z-index
– 注意：position: static 无法通过继承或层叠改变，必须显式设置
父容器创建了新的堆叠上下文，子元素 z-index 被截断
这是最隐蔽也最常被忽略的原因。一旦某个祖先元素满足特定条件（比如有 opacity 小于 1、transform 非 none、filter、will-change、或本身是 position: fixed），它就会创建独立的堆叠上下文（stacking context）。此时它的所有子元素的 z-index 只在该上下文内比较，不再和外部兄弟元素竞争层级。
使用场景：
– 卡片组件带淡入动画（用了 opacity: 0.99）
– 弹窗外层加了 backdrop-filter: blur(2px)
– 使用 transform: translateZ(0) 强制硬件加速
实操建议：
– 在开发者工具中选中疑似“盖不住”的元素，看 Styles 面板里是否出现 “Stacking Context” 提示
– 检查父级是否意外设置了 opacity、filter、transform、isolation: isolate 等触发属性
– 临时移除这些属性，确认是否恢复预期层级
– 如果必须保留（如动画效果），就改用提升父容器本身的 z-index，而不是只调子元素
z-index 数值对比只在同级堆叠上下文中有效
z-index 不是全局“最大数字赢”，而是按 DOM 层级和堆叠上下文逐层比较。两个不同堆叠上下文里的元素，即使子元素 z-index: 9999，也可能被父级 z-index: 1 的容器整体压在下面。
参数差异：
– z-index: auto（默认）等价于 z-index: 0，但只在自身是定位元素且未创建新上下文时成立
– z-index: 0 会创建新的堆叠上下文（当元素已定位）
– 负值（如 z-index: -1）会让元素沉到其父堆叠上下文的背景和边框之下
性能 / 兼容性影响：
– 过度依赖高数值（如 z-index: 999999）容易引发维护混乱，也掩盖真实层级问题
– IE6/7 对 z-index 解析异常，但现代项目基本无需考虑
简短示例：
如果 .modal 和 .sidebar 是兄弟元素，但 .modal 的父容器有 opacity: 0.99，那么哪怕 .modal 内部设了 z-index: 9999，只要 .sidebar 的 z-index 在其父上下文中更高，它仍可能盖住 .modal
检查浏览器渲染顺序与伪元素干扰
有些时候层级逻辑是对的，但视觉上还是错乱——可能是伪元素（::before / ::after）或 border、background 等绘制层干扰了感知。CSS 渲染顺序中，伪元素默认在内容之上、但仍在 z-index 控制范围内；而 border 和 background 属于底层绘制，不会被 z-index 推前。
常见错误现象：
– 弹窗阴影被另一个元素的 border 切掉一块
– 图标用 ::after 生成，但始终显示在文字下方，调 z-index 无效
– 使用 box-shadow 时发现阴影被裁剪，实际是父容器 overflow: hidden 导致
实操建议：
– 在开发者工具中勾选 “Show layout borders” 或临时加 outline: 2px solid red 辅助判断真实占位
– 伪元素要参与 z-index 排序，必须先让它成为定位元素（加 position: absolute 或 relative）
– 检查是否有 overflow: hidden、clip-path 或 mask 等裁剪行为，它们优先级高于层叠
z-index 自身，多看一眼父级的 computed styles 里有没有“Stacking Context”字样。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
