z-index类名无效首要原因是元素未定位，必须显式设置position: relative/absolute/fixed/sticky；其次需排查祖先元素是否因opacity<1、transform等触发层叠上下文，导致子元素z-index被限制在局部范围内。
z-index类名写了却没反应，先查position是否生效
Tailwind的z-50、z-100这类类名，只对已定位元素起作用。如果元素仍是position: static（默认值），浏览器直接忽略z-index声明——不是“效果弱”，是压根不读。
常见误操作包括：
- 只加
z-50，漏掉relative或其它定位类 - 在 Flex/Grid 容器里给子项加
z-50，误以为布局模式能替代定位 - 用 JS 动态切换 class 时，只更新 z 类，没同步补上
relative
快速验证：打开开发者工具 → 选中元素 → 在「Computed」面板搜position，若值为static，那就不用往下看了，先加relative再说。
父容器悄悄创建了层叠上下文，子元素z-index被锁死
即使你给子元素写了absolute和z-999，只要它任意一个祖先元素满足以下任一条件，就会创建独立的层叠上下文（stacking context），把子元素的z-index关进“小盒子”里：
立即学习“前端免费学习笔记（深入）”；
-
opacity小于 1（比如opacity-99） -
transform非none（哪怕只是translateZ(0)或scale(1)） -
filter、will-change、isolation: isolate、backdrop-filter
此时子元素的z-999只能跟同个父容器下的兄弟比高低，盖不过隔壁z-1的弹窗——因为它们不在同一个上下文里。
排查技巧：
- 在「Computed」面板里搜
stacking context，标为Yes即中招 - 临时注释掉父级可疑样式（如
opacity-99、transform），看遮挡是否消失 - 必须保留动效？那就别只调子元素，改用
z-[value]提升父容器本身，或把目标元素用 JS 移到document.body下 +fixed手动定位
tailwind.config.js里zIndex配置写错位置或格式
Tailwind v3.0+ 的zIndex必须明确定义在theme.zIndex对象里，数组写法、放错层级、键名不加引号，都会导致 CSS 规则根本没生成。
正确写法示例：
module.exports = {
theme: {
zIndex: {
'background': '0',
'dropdown': '30',
'tooltip': '40',
'modal': '50',
'max': '2147483647'
}
}
}
错误写法包括：
- 写在
extend.zIndex里（不会覆盖默认空值，等于白配） - 用数组：
zIndex: ['0', '10', '50']（v3 已废弃） - 键名不加引号：
50: '50'（JS 会转成数字键，可能导致不可预期行为）
改完配置后必须重启开发服务器——Tailwind 不热重载tailwind.config.js变更。
为什么z-[999]和动态拼接z类要慎用
z-[999]这类任意值语法依赖 JIT 模式扫描content数组中的字符串字面量。一旦值来自变量（如 React 中z-[${depth}]）、运行时计算或未显式出现在content路径文件中，生产构建时大概率被 PurgeCSS 漏删，导致样式丢失。
更实际的问题是维护性：
- 无法静态分析哪些 z 值被真正使用
- 多个组件各自硬写
z-[999]，冲突时完全无法溯源语义 - 第三方库（如 Headless UI）注入顺序可能晚于你的 Tailwind 输出，
z-[999]反被覆盖
推荐做法：在theme.zIndex中定义语义化键名（如'toast': '50'），HTML 中统一用z-toast——数值留间隙，方便未来插中间层，也禁得起协作与迭代。
真正难的从来不是写对那一行z-50，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的opacity或transform。
