z-index无效主因是元素position为static或被父级层叠上下文限制；需确认position非static，排查opacity/transform/filter等触发的堆叠上下文，并检查tailwind中theme.zindex配置是否正确且已重启服务。
z-index 写了但完全没反应，90% 是元素根本没参与层叠计算——不是数值太小，而是被浏览器“跳过”了。
检查目标元素的 position 是否为 static
只要 position 是 static（默认值），z-index 就是无效语法，浏览器连解析都不会做。
- 打开 Chrome DevTools，选中目标元素，在 «Computed» 面板搜索
position，确认最终值不是static - 临时加一行
position: relative（几乎不影响布局），看z-index是否立刻生效 - JS 动态插入或 Vue/React class 切换时，容易只设
z-index却漏掉position；也要防其他样式规则把position覆盖回static或initial -
float会干扰定位行为：哪怕写了position: relative，若同时有float，z-index也可能失效
逐级排查祖先是否创建了层叠上下文
一个带 opacity: 0.99 或 transform: translateZ(0) 的父容器，会静默生成独立“结界”，子元素的 z-index 只能在里面比大小，和外部无关。
- 在 Elements 面板中逐级点击父节点，右侧面板 «Layout» 标签下留意 «Stacking context» 是否突然变成
Yes - 常见触发属性包括：
opacitytransform ≠none、filter≠none、will-change: transform、isolation: isolate、position: fixed或sticky且z-index非auto - 临时注释掉可疑父级的
transform或opacity，看遮挡是否立刻消失——这是最快实锤手段 - 特别注意：
z-index: 0会强制创建新上下文，而z-index: auto不会（前提是元素已定位）
Tailwind CSS 中 z-index 类名不生效怎么办
Tailwind v3+ 的 zIndex 配置极其敏感，错一个字符或漏一步操作，z-[50] 就根本不会生成 CSS 规则。
- 必须完整定义在
theme.zIndex下，键名加引号、值为字符串：{ 'modal': '60' }，不能写成modal: 60或modal: '60'（未加引号） -
extend: { zIndex: { ... } }无效——theme.zIndex默认为空对象，extend不会合并，只会覆盖 - 改完配置后必须重启开发服务器，Tailwind 不热重载配置变更
-
z-[999]这类动态拼接的类名在构建时不会被扫描，仅限 JIT 模式下启用且需显式配置content路径
真正难的不是算清该写多少，而是每次修改样式或媒体查询后，都要往上多看两层 DOM，确认那个刚被激活的 transform 或 opacity 没把你需要浮出的元素关进盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
