z-index再大也无效的根本原因是元素未定位或受堆叠上下文限制；必须确保position非static，且检查父元素是否意外创建了独立堆叠上下文。
z-index再大也无效，先确认元素是否已定位
浏览器根本不会读取 z-index，只要元素的 position 是 static（默认值）。这不是“效果弱”，是彻底不参与层叠计算。
- 用 Chrome DevTools 选中元素，在 «Computed» 面板搜
position，确认最终值不是static - 临时加一行
position: relative（几乎不影响布局），看遮挡是否立刻消失 - JS 动态插入时容易漏掉
position声明；Vue/React 中 class 切换后，也要检查是否被其他规则覆盖 -
display: flex或grid容器的子项，即使没写position，也能响应z-index，但仅限该容器内部生效 —— 仍受祖先堆叠上下文限制
父元素悄悄创建了堆叠上下文，子元素被“关进盒子”
哪怕父级只写了 opacity: 0.99、transform: translateZ(0) 或 filter: blur(0)，它就自动变成一个独立的堆叠上下文（stacking context）——子元素的 z-index 只能在盒子里比大小，出不去。
- 在 DevTools 的 Elements 面板中逐级点击父节点，右侧面板 «Layout» 标签页留意 «Stacking context» 是否突然变成
Yes - 重点盯那些“没设
z-index却突然变成Yes”的父节点，大概率是opacity、transform或filter在作祟 - 临时注释掉可疑样式（比如删掉
opacity-95或scale-100），看遮挡是否立刻消失 —— 这是最直接的验证方式 -
z-index: 0和z-index: auto效果不同：z-index: 0（配合已定位）会主动创建新上下文；z-index: auto不会
Tailwind 中 z-* 类失效，不只是配错数值
Tailwind 的 z-50 或 z-[999] 一样要满足定位前提，且配置错误或构建机制问题会让规则根本不出现在 CSS 中。
-
z-*类只对position非static的元素生效；动态弹窗（如 toast）必须同步加relative或fixed，不能只靠 JS 操作 class -
tailwind.config.js中写extend: { zIndex: { 'modal': '50' } }无效 —— v3+ 要完整定义在theme.zIndex下，且键名必须加引号、值必须是字符串 - 改完配置必须手动重启 dev server；JIT 模式不热重载配置变更
-
z-[${depth}]这类动态拼接在生产环境大概率失效 —— JIT 扫描依赖 content 配置中的字面量字符串，无法静态分析
真正难的不是堆数字，而是看清谁在哪个盒子里比大小
两个 z-index: 9999 的元素互相遮挡？它们很可能分属不同堆叠上下文，此时浏览器按 DOM 顺序或父容器层级决定谁在上，跟子元素的 z-index 数值完全无关。修复关键永远在“上下文入口”：要么删掉触发它的属性，要么提升那个父容器本身的 z-index，而不是继续给子元素狂加数字。
立即学习“前端免费学习笔记（深入）”；
