z-index失效主因是元素未定位或被父层叠上下文隔离；需确认position非static，并逐级检查opacity
z-index 没生效，99% 不是数值写小了，而是元素压根没参与层叠计算，或者被父级“关进盒子”里了。
position 是 static，z-index 就是废代码
浏览器对 position: static（默认值）的元素完全忽略 z-index，连解析都不解析，更不会报错。你写 z-index: 9999 和写 z-index: 0 效果一样——都无效。
- 用 Chrome DevTools 的 «Computed» 面板搜
position，确认最终值不是static - JS 动态插入浮层（如 tooltip、modal）时，常只设
z-index，漏掉同步加position: fixed或position: absolute - Vue/React 中 class 切换后，样式可能被重置回
position: static，得检查最终 computed 值 - 临时加一行
position: relative（不影响文档流），看遮挡是否立刻消失——这是最快验证方式
父元素悄悄创建了层叠上下文（stacking context）
哪怕子元素 position 正确、z-index 很高，只要某个祖先元素满足以下任一条件，它就变成一个独立“结界”，子元素的 z-index 只能在里面比大小，出不去。
-
opacity小于 1（包括opacity: 0.999） -
transform不为none（比如transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky且z-index不是auto
实操建议：在 Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页盯紧 «Stacking context» 是否突然变成 Yes；重点查那些“没写 z-index 却显示 Yes”的节点——大概率是它用了 transform 或 opacity。
响应式断点中激活的属性会静默触发新上下文
媒体查询里一行看似无害的 transform 或 opacity，就能让整个容器变成层叠上下文源头。桌面端正常，移动端一缩放就失效，基本就是这个原因。
- 切到对应断点，在 «Computed» 面板搜
transform，看是否从none变成了具体值 - Flex 或 Grid 容器在断点中启用后，若父容器同时有
opacity: 0.99，子项就全被隔离 - 断点中改了
position（比如从static切到fixed），必须同步补上z-index，否则默认进入“第二层”，大概率被 header 盖住 - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证断点生效后的实际值，注意auto和0的区别：z-index: 0会强制创建新上下文，z-index: auto不会（前提是已定位）
Tailwind CSS 中 z-index 配置不生成 CSS 规则
Tailwind v3.0+ 已废弃数组写法，zIndex 必须完整定义在 theme.zIndex 下，且键名要加引号、值必须是字符串。错一个字符，CSS 就不生成。
- 只写
extend: { zIndex: { 'modal': '50' } }——theme.zIndex默认为空，追加无效 - 写成
modal: 50（数字）或modal（未加引号），JS 解析失败或截断 - 改完配置后没重启开发服务器——Tailwind 不热重载配置变更
- ✅ 正确示例：
zIndex: { '0': '0', '10': '10', 'modal': '50', 'modal-overlay': '40' }
真正难的不是算清该写多少，而是每次改完样式，都要往上多看两层 DOM，确认那个刚被激活的 transform 或 opacity 没把你需要突出的元素关进盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
