z-index失效根本原因是元素未定位或被祖先层叠上下文隔离；需先确认position非static，再排查opacity
根本原因不是数值写小了，而是目标元素压根没进入有效的层叠上下文计算——要么没定位，要么被某个祖先节点用 opacity、transform 或 filter 静默关进了独立“结界”里。
为什么加了 z-index 但 DevTools 里显示 (not applicable)？
这是最直接的信号：浏览器根本没把它当层叠参与者。
-
position最终计算值是static（默认值），z-index就完全被忽略，连 warning 都不报 - 用 Chrome DevTools 选中元素，在 «Computed» 面板搜
position，确认不是static - 临时加
position: relative（不带偏移），刷新看z-index是否立刻变黑、可读 - Vue/React 中动态插入弹窗时，常只设
z-50却漏掉同步声明position: fixed或position: absolute
为什么 z-index 数值很大却还是被盖住？
说明它已进入某个层叠上下文，但那个上下文本身层级很低——它的“天花板”被锁死了。
- 逐级向上点父节点，在 DevTools «Layout» 标签下盯
Stacking context字段，看哪一层突然变成Yes - 重点检查那些没写
z-index却标为Yes的节点：它们往往只写了opacity: 0.99、transform: translateZ(0)或filter: blur(0) - iOS Safari 特别敏感：
html或body上任意一个transform都会让整个页面变成单一层叠上下文 - 第三方 UI 库（如 Ant Design）里常见的
.ant-card { position: relative; z-index: 0; }是隐形雷：它强制创建新上下文，且z-index: 0比auto更危险
Tailwind 中 z-* 类不起作用的典型陷阱
Tailwind 不是魔法，它只是生成 CSS；失效时往往卡在配置或使用方式上。
-
z-50对position: static元素完全无效，必须显式加relative、fixed等类 -
tailwind.config.js中写extend: { zIndex: { modal: '60' } }是错的，v3+ 要求完整定义在theme.zIndex下，且键名必须加引号、值必须是字符串 - 改完配置后没重启开发服务器，JIT 模式不会热重载，CSS 规则根本不会生成
-
z-[999]或动态拼接类名（如class={`z-[${depth}]`}）在生产构建中大概率漏生成，因为 JIT 依赖静态 content 扫描
真正难的不是调大数字，而是得顺着 DOM 往上翻三五层，找到那个看似无害、实则封印了所有子元素层级自由的 transform: scale(1) 或 opacity: 0.99 —— 它可能藏在你完全没怀疑过的第 4 层祖先上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
