Tailwind z-index失效主因是配置位置错误和层叠上下文问题：必须将zIndex对象完整定义在theme.zIndex下（非extend），键名加引号、值为字符串，且改后须重启dev server；同时元素需有非static定位，且不能处于父级意外创建的层叠上下文中。
直接在 tailwind.config.js 的 theme.zIndex 中用对象语法定义，改完必须重启开发服务器——Tailwind 不热重载配置变更。
zIndex 必须写在 theme.zIndex 下，不能写在 extend.zIndex
很多人配了 'modal-overlay': '60' 却没生成 z-modal-overlay 类，问题就出在位置错了。Tailwind v3.0+ 的 extend 只追加，而默认 theme.zIndex 是空对象，不定义它，extend 就等于白写。
- ✅ 正确：把整个映射写进
theme.zIndex，例如：module.exports = { theme: { zIndex: { 'background': '0', 'dropdown': '30', 'tooltip': '40', 'modal-overlay': '60', 'modal-content': '70' } } } - ❌ 错误：
extend: { zIndex: { 'tooltip': '40' } }→ 不生成任何类 - ❌ 错误：
zIndex: ['0', '10', '40']→ 数组写法已废弃，v3.0+ 完全不识别
z-* 生效的两个硬条件缺一不可
写了 z-tooltip 却被盖住？不是数值太小，而是 z-index 根本没触发。它只在满足以下两个条件时才起作用：
- 元素自身必须有非
static的position（比如加了relative、absolute、fixed或sticky） - 该元素不能处于一个被父级意外创建的层叠上下文中（比如父元素有
transform、opacity: 0.99、filter或will-change）
常见踩坑点：
• 给按钮加 z-50 却忘了加 relative → 完全无效
• 模态框嵌在 transform: scale(0.99) 的容器里 → 子元素的 z-70 只在这个缩放上下文内有效
立即学习“前端免费学习笔记（深入）”；
为什么别用 z-[999] 或动态拼接 class
z-[999] 看似灵活，但实际依赖 JIT 扫描 content 字段里的字面量字符串。React 中写 class={`z-[${depth}]`}，构建时根本不会识别，生产环境必漏生成。
- 维护性差：没人知道
z-[999]对应什么 UI 角色，下次加个 Tooltip，该用 998 还是 1001？冲突后无法溯源 - 不可控：JIT 模式对模板字符串、变量插值基本不扫描，
z-[${x}]几乎肯定失效 - 推荐做法：所有 z-index 值必须提前在
theme.zIndex中明确定义，命名带语义（如tooltip、modal-overlay），组件内统一用z-tooltip
真正卡住人的从来不是数字写多大，而是没意识到：每个定位元素是否处在同一层叠上下文里。检查父级有没有无意中触发新上下文，比反复调大 z 值管用得多。
