z-index无效的首要原因是元素position为static，必须设为relative、absolute等才参与层叠；其次可能被父级层叠上下文限制，如opacity<1、transform不为none等；Tailwind中需正确配置theme.zIndex且重启服务；z-index:0会创建新上下文，慎用。
z-index写了但完全没反应，先查position是不是static
浏览器压根不读你的z-index值，只要元素的position是static（默认值），它就自动被排除在层叠计算之外。这不是“效果弱”，而是“不参与”。
常见误操作包括：
- 只写
z-index: 999，忘了加position: relative - 用JS动态添加样式时，只改
z-index，漏掉同步设置position - 误以为
display: flex或grid子项能靠父容器定位“继承”层级——其实子项自己必须显式声明position
快速验证方法：打开Chrome DevTools，选中目标元素，在「Computed」面板里搜position，确认最终值不是static；临时加一行position: relative，看z-index是否立刻生效。
被父级“关进小房间”了：检查是否意外创建了层叠上下文
即使position设对了，z-index也可能被锁死在局部范围——只要某个祖先元素满足以下任一条件，它就创建了新的层叠上下文（stacking context），子元素的z-index只能在它内部比大小：
立即学习“前端免费学习笔记（深入）”；
-
opacity小于1（哪怕opacity: 0.999） -
transform不为none（包括看似无害的transform: translateZ(0)、scale(1)） -
filter不为none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky且z-index非auto
调试建议：在DevTools Elements面板中逐级点击父节点，右侧面板「Layout」标签页留意「Stacking context」是否突然变成Yes；临时注释掉可疑父级的transform或opacity，看遮挡是否立刻消失。
Tailwind CSS中z-index配置无效，重点检查theme.zIndex格式与服务重启
Tailwind v3.0+ 已废弃数组写法，zIndex必须完整定义在theme.zIndex下，且键名必须加引号、值必须是字符串。错一个字符，CSS规则根本不会生成。
常见错误：
- 只写
extend: { zIndex: { 'modal': '50' } }——theme.zIndex默认为空，追加无效 - 写成
modal: 50（数字）或modal（未加引号），JS解析失败或截断 - 改完配置后没重启开发服务器——Tailwind不热重载配置变更
✅ 正确示例：
module.exports = {
theme: {
zIndex: {
'background': '0',
'dropdown': '30',
'tooltip': '40',
'modal-overlay': '60',
'modal-content': '70',
}
}
}
z-index: 0和z-index: auto效果完全不同，别乱加
很多人以为z-index: 0很安全，其实它会强制创建新层叠上下文；而z-index: auto（默认值）不会——前提是元素已定位。这个细节常导致“明明啥都没动，突然就盖不住了”。
典型踩坑场景：
- 父容器意外设置了
position: relative+z-index: 0，等于主动建了个结界 - 用
z-[0]或z-0类覆盖默认行为，却没意识到它触发了隔离 - 想让元素参与排序但不想隔离上下文，结果加了
z-index: 0反而更糟
真正难的不是写对那行z-index，而是得顺着DOM往上翻三五层，找到那个没声没息就切断层级链的transform或opacity——它往往藏在动画、滤镜或第三方组件的默认样式里。
