z-index失效主因是元素position为static未参与层叠计算，或被祖先创建的层叠上下文隔离；需确认position非static，并排查opacity<1、transform≠none等触发属性。
z-index 失效，几乎从不因为数值写小了，而是元素根本没参与层叠计算，或被锁死在某个祖先创建的独立层叠上下文里。
元素 position 是 static，z-index 直接被浏览器忽略
只要 position 是 static（默认值），z-index 就是无效语法——浏览器连解析都不会解析它，更不会报错或警告。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜
position，确认最终值不是static - 临时加一行
position: relative（不影响文档流），立刻验证z-index是否生效 - JS 动态插入弹窗、tooltip 时，常只设
z-index，漏掉同步设置position: fixed或absolute - Vue/React 中 class 切换后，定位属性可能被其他样式规则重置为
initial或unset
父级元素静默创建了 stacking context，子元素 z-index 被“关进盒子”
一旦某个祖先元素满足以下任一条件，它就创建了新的层叠上下文（stacking context）——子元素的 z-index 只能在该盒子内部比大小，无法和外部同级元素竞争。
- 常见触发属性：
opacity< 1（哪怕opacity: 0.999）、transform≠none（包括translateZ(0)、scale(1)）、filter≠none（哪怕blur(0)）、will-change: transform、isolation: isolate - 在 DevTools Elements 面板中逐级点击父节点，右侧面板 «Layout» 标签页下看 «Stacking context» 是否突然变成
Yes - 临时注释掉可疑父级的
transform或opacity，遮挡是否立刻消失？是 → 就是它 -
z-index: 0和z-index: auto行为不同：前者会强制创建新上下文，后者不会（前提是元素已定位）
Tailwind CSS 中 zIndex 配置不生效，常因格式或热更新问题
Tailwind v3.0+ 已废弃数组写法，zIndex 必须完整定义在 theme.zIndex 下，且键名必须加引号、值必须是字符串。错一个字符，CSS 规则就不会生成。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
extend: { zIndex: { 'modal': '50' } }——theme.zIndex默认为空，追加无效 - 错误写法：
modal: 50（数字）或modal（未加引号），JS 解析失败或截断 - 改完
tailwind.config.js后没重启开发服务器 —— Tailwind 不热重载配置变更 - 正确示例：
theme: { extend: { zIndex: { 'modal': '60', 'dropdown': '50' } } }
移动端和响应式断点中 z-index 突然失效
响应式布局里最隐蔽的问题是：媒体查询中激活的 transform、opacity 或 filter 静默创建了新层叠上下文，而你根本没意识到它只在某个断点里生效。
- iOS Safari 对
html或body上的transform: translateZ(0)极其敏感，整页变成单一层叠上下文，“最高”的弹窗也只能在里面排第一 - 断点中从
display: block切换为flex或grid时，若父容器同时有opacity: 0.99，整个子项组就被隔离了 - 媒体查询中改了
position（如 desktopstatic→ mobilefixed），却漏掉同步补z-index，结果元素浮起但落在默认层（第二层） - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证断点生效后的实际值，注意auto和0的语义差异
真正难的不是堆数字，而是每次写 z-index: 9999 前，先往上点三下 DevTools，找到那个突然标红的 «Stacking context: Yes» —— 那才是你该修的地方。
