Tailwind 的 z-index 覆盖无效，90% 是因元素未定位、父级创建层叠上下文或配置错误；需确认 position 非 static、排查 stacking context 源头、正确配置 theme.zIndex 并重启服务。
Tailwind 的 z-index 覆盖无效，90% 不是数值太小，而是根本没进层叠计算——要么元素没定位，要么被父级“关”在独立上下文里，要么配置压根没生效。
元素没设 position，z-index 就是摆设
浏览器只对 position 为 relative、absolute、fixed 或 sticky 的元素读取 z-index；position: static（默认值）时，z-index 完全被忽略。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜
position，确认不是static - 临时加一行
position: relative，看遮挡是否立刻消失——这是最轻量验证方式 - 别给所有容器统一加
position: relative：可能意外触发层叠上下文，或干扰 flex/grid 布局
父容器悄悄创建了层叠上下文
只要某个祖先元素满足以下任一条件，它就创建新层叠上下文，子元素的 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
调试建议：在 DevTools «Layers» 面板里找标为 Stacking context: Yes 的节点，从目标元素向上逐级点父节点，第一个标红的就是“结界源头”；临时注释掉它的 transform 或 opacity，看覆盖是否恢复。
tailwind.config.js 中 zIndex 配置没写对位置或格式
Tailwind v3.0+ 已废弃数组写法，也不接受 extend.zIndex 追加。所有 z- 类必须完整定义在 theme.zIndex 下，且键名加引号、值为字符串，改完必须重启开发服务器。
- ❌ 错误：
extend: { zIndex: { 'modal': '60' } }——theme.zIndex默认为空，追加无效 - ❌ 错误：
zIndex: ['0', '10']—— 数组写法已废弃 - ❌ 错误：
zIndex: { modal: '60' }——modal会被 JS 解析为键名，-后内容丢失 - ✅ 正确：
zIndex: { 'modal-overlay': '60', 'tooltip': '40' } - 改完配置后不重启 dev server，CSS 规则根本不会生成
别用 z-[999] 动态拼接 class
z-[999] 看似灵活，但构建时依赖 JIT 扫描 content 字段里的字面量字符串；React 中写 class={`z-[${depth}]`}，构建阶段根本识别不了，生产环境极易漏生成。
- 没人知道
z-[999]对应什么 UI 场景，下次加个tooltip，该用 998 还是 1001？冲突后无法溯源 - 第三方组件（如 Headless UI）可能内联
z-10，而你的z-[999]因注入顺序靠前反被覆盖 - ✅ 推荐：在
theme.zIndex中明确定义语义化层级（如'tooltip': '40'），组件内直接用z-tooltip
真正难的不是调高数字，而是意识到：z-index 是嵌套在层叠上下文树里的相对值。每次想加个 z-[9999] 前，先打开 DevTools 往上点三下 —— 那个突然标红的 Stacking context: Yes 才是你该修的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
