z-index失效的根本原因是元素未定位或被父级堆叠上下文隔离；必须设position为relative/absolute/fixed/sticky，并检查opacity、transform等是否隐式创建新堆叠上下文。
元素没定位，z-index根本不会生效
写了 z-index: 999 却点不了按钮？先检查它是不是 position: static。这是最常被忽略的前提：z-index 只对 position 值为 relative、absolute、fixed 或 sticky 的元素起作用。默认值 static 下，浏览器直接忽略 z-index，连控制台警告都没有。
实操建议：
- 用 DevTools 的 Computed 面板搜索
position，确认最终计算值不是static - 临时加
position: relative（不影响布局），立刻验证是否恢复可点击性 - 动态创建的元素（如 JS 用
document.createElement）极易漏掉position声明，必须显式设置
父容器悄悄建了“玻璃盒子”，子元素出不去
按钮已定位、z-index 也设了，还是被盖住？大概率是某个祖先元素触发了层叠上下文（stacking context），相当于给子元素套了个“玻璃盒子”——盒内 z-index 再高，也赢不了盒子外的同级元素。
这些属性只要出现在任意父级上，就会建盒子：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括translateZ(0)、scale(1)） -
filter有值（哪怕blur(0)） -
will-change: transform或will-change: opacity isolation: isolate
调试方法：
- 在 Chrome/Safari DevTools 的 Elements 面板逐级点击父节点，右侧面板 Layout 标签页看「Stacking context」是否突然变成
Yes - 临时注释掉可疑父级的
transform或opacity，遮挡是否立刻消失？ - 真机调试 iOS Safari 时，重点盯轮播外层、卡片容器、模态框直接父容器——它们常为动画偷偷加了
transform
移动端 Safari 对 transform + z-index 特别敏感
iOS Safari（尤其 ≤ 16.6）对 transform 创建层叠上下文极其激进：哪怕只是 transform: translateZ(0)，它就立刻建盒子；而 Chrome 可能忽略。更麻烦的是，如果这个带 transform 的父容器没显式设 position 和 z-index，它的子元素层级就容易错乱。
正确做法不是堆子元素的 z-index，而是修复父容器：
- 给触发
transform的父容器加上position: relative和z-index: 0（注意：z-index: 0必须配position才生效） - 避免只靠
translateZ(0)做硬件加速，改用will-change: transform+ 显式z-index - 若父容器是
display: grid，检查其子项是否同属一个渲染层——某些组合会隐式触发隔离
Tailwind 中 z-index 类不生效的硬条件
用了 z-50 却没效果？Tailwind 的 z-index 类要起作用，同样依赖两个硬条件：
- 对应元素必须有非
static的position（比如加relative或fixed） - 该元素不能处于一个被父级意外创建的层叠上下文中（比如父级有
opacity-90或transform）
另外，配置本身也容易出错：
-
tailwind.config.js中zIndex必须用对象语法完整定义，不能只写extend；键名必须加引号，值必须是字符串（如'modal': '1000'） - 改完配置后必须重启开发服务器——Tailwind 不热重载配置变更
- 禁用
z-[999]这类动态写法：构建时无法扫描变量拼接，生产环境必漏生成
真正难的从来不是数值大小，而是搞清哪个容器该承担全局层级责任。大多数时候，问题不在按钮本身，而在它头顶那个没声张却擅自建了“结界”的父元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
