tailwind中z-index失效主因是position未设置、父容器创建层叠上下文或theme.zindex配置错误且未重启服务器；z-50无效先查computed position是否为static，z-999被盖住需排查opacity/transform/filter等触发的新层叠上下文，配置必须用字符串键值对并完整定义于theme.zindex中。
直接说结论：Tailwind 中 z-index 混乱，90% 不是数值不够大，而是 position 没设、父容器意外创建了层叠上下文，或 theme.zIndex 配置格式错误且没重启开发服务器。
z-50 写了却完全没反应？先查 position 和 computed 值
浏览器对 position: static（默认值）的元素彻底忽略 z-index，连 warning 都不报。这不是“效果弱”，是压根不参与层叠计算。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜索
position，确认最终值不是static - 临时加
class="relative"或style="position: relative"，看遮挡是否立刻消失 - 动态插入的元素（如 JS 创建的 toast）必须同步设置
position，只改z-类无效 -
display: flex或grid容器的子项，即使没写position，z-index也能生效——但仅限该容器内部，仍受祖先层叠上下文限制
z-999 生效了却被盖住？大概率是父容器建了“玻璃盒子”
只要某个祖先元素满足以下任一条件，它就创建了新的层叠上下文（stacking context），子元素的 z-index 只能在其内部比大小，无法和外部同级元素竞争：
-
opacity小于 1（哪怕opacity-95或opacity: 0.999） -
transform不为none（包括scale-95、translate-z-0、rotate-0） -
filter不为none（哪怕blur-sm或filter: blur(0)） -
will-change: transform、isolation: isolate
调试方法：在 Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页留意 «Stacking context» 是否突然变成 Yes；临时注释掉可疑父级的 transform 或 opacity，遮挡消失即坐实问题。
tailwind.config.js 里 zIndex 配错了？格式错一个字符就不生成 CSS
Tailwind v3.0+ 已废弃数组写法，也拒绝 extend.zIndex 追加式配置。所有 z- 类必须完整定义在 theme.zIndex 下，且键名必须加引号、值必须是字符串。
- ✅ 正确：
zIndex: { 'modal-overlay': '60', 'tooltip': '40' } - ❌ 错误：
extend: { zIndex: { 'modal-overlay': '60' } }（theme.zIndex默认为空，追加无效） - ❌ 错误：
zIndex: ['0', '10']（数组写法已废弃） - ❌ 错误：
zIndex: { modal-overlay: '60' }（JS 解析为modal键，-overlay被截断） - ⚠️ 改完必须手动重启开发服务器——Tailwind 不热重载
tailwind.config.js变更
为什么别用 z-[999] 或 class={`z-[${depth}]`}？
z-[999] 依赖 JIT 模式扫描 content 字段中的字面量字符串。React 中写 class={`z-[${depth}]`}，构建时根本不会识别，生产环境必漏生成。
- 维护性差：没人知道
z-[999]对应什么 UI 角色，下次加个 tooltip，该用 998 还是 1001？冲突后无法溯源 - 权重不可控：第三方库（如 Headless UI）注入的
z-50可能因 CSS 加载顺序覆盖你的z-[999] - 真机风险高：iOS Safari 对
transform+z-index特别敏感，z-[999]在局部上下文中再大也出不去
真正要做的，是在 theme.zIndex 中明确定义语义化层级（如 'dropdown'、'toast'），组件内统一用 z-dropdown，而不是靠数字堆砌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
