z-index失效的四大原因：relative未显式声明导致无效；父容器创建层叠上下文使子z-index受限；z-index: 0主动隔离层级；relative父元素塌陷致absolute子元素定位基准错误。
relative元素没设position就写z-index
z-index对position: static完全无效，而relative本身不是默认值——它必须显式声明。很多人以为“relative定位”是某种状态，其实只是position: relative这个声明生效后才触发后续行为。如果样式被覆盖（比如CSS重置、框架默认规则或更高优先级选择器设回static），z-index立刻归零。
实操建议：
– 打开DevTools，选中元素，在「Computed」面板搜position，确认最终值是relative而非static
– 临时加position: relative !important验证是否恢复层级
– Vue/React中动态切换class时，检查是否遗漏了position声明，或被其他样式规则覆盖
父容器悄悄创建了层叠上下文
只要某个祖先元素用了opacity: 0.99、transform: translateZ(0)、filter: blur(0)或will-change: transform，它就自动成为新的层叠上下文根节点。此时子元素的z-index只在它内部有效，哪怕你写了z-index: 9999，也盖不过隔壁同级容器里的z-index: 1元素。
实操建议：
– 在DevTools的Elements面板逐级点击父节点，右侧面板「Layout」标签页看「Stacking context」是否突然变成Yes
– 重点盯那些没写z-index却显示Yes的父元素，大概率是opacity或transform在作祟
– 临时注释掉父级这些属性，观察遮挡是否消失——这是最快定位手段
z-index: 0主动建了个“结界”
z-index: 0和z-index: auto看着差不多，但效果相反：z-index: 0会强制创建新层叠上下文；z-index: auto（默认）则不会——前提是元素已定位。很多UI组件库或手写样式里，父容器写着position: relative; z-index: 0，等于给整个子树加了层“玻璃罩”，子元素再怎么调z-index都出不去。
实操建议：
– 检查父容器是否同时有position: relative和z-index: 0
– 若只需让子元素参与排序而不隔离上下文，改用z-index: auto
– 不要盲目提高子元素z-index数值，先确认父级没用z-index: 0锁死层级
relative作为定位上下文时尺寸塌陷
当position: relative元素内部只有浮动子项、或内容为空、或高度被压缩为0时，它的“包含块”实际尺寸为0。此时里面设了position: absolute的子元素，会按视口定位，而不是按你预期的父容器定位——看起来像z-index失效，其实是定位基准错了。
实操建议：
– 给relative父容器加border: 1px solid red，看它是否真有宽高
– 若内部有浮动，加overflow: hidden或伪元素清除浮动
– 避免仅靠padding撑开高度，显式设置min-height或height
opacity、transform或z-index: 0。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
