z-index无效通常因未设position或被父级层叠上下文隔离；需先确保position非static，再检查祖先元素是否触发新层叠上下文（如opacity

z-index 无效，八成是因为没设 position，或者设了但被父级层叠上下文锁死了。

为什么 z-index 对某些元素完全没反应

浏览器压根不读你的 z-index 值——只要元素的 position 是 static（默认值），它就自动被排除在层叠计算之外。这不是“效果弱”，而是“不参与”。
常见误操作包括：

• 只写 z-index: 999，忘了加 position: relative
• 用 JS 动态添加样式时，只改 z-index，漏掉同步设置 position
• 元素是 display: flex 或 grid 的子项，误以为不用定位也能生效（其实可以，但仅限该容器内，且仍受父级上下文限制）

怎么快速确认是不是 position 没生效

打开开发者工具，选中目标元素，在「Computed」面板里搜 position，看最终值是不是 static。如果是，z-index 就等于没写。
临时验证方法很简单：

• 在样式里加一行：position: relative（几乎不影响布局）
• 再刷新看 z-index 是否立刻起效
• 如果还是无效，说明问题已转移到上层——大概率是某个父元素悄悄创建了新层叠上下文

父容器触发层叠上下文导致 z-index 被截断

即使你给子元素写了 position: absolute 和 z-index: 9999，只要它的任意一个祖先元素设置了以下任一属性，就会形成独立层叠上下文，把子元素的 z-index “关进盒子”里：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• opacity 小于 1（比如 opacity: 0.99）
• transform 非 none（哪怕只是 transform: translateZ(0)）
• filter、will-change、isolation: isolate、contain: layout paint

此时子元素的 z-index: 9999 只能跟同个父容器下的兄弟比高低，根本盖不过隔壁 z-index: 1 的弹窗——因为它们不在同一个上下文里。

修复思路：提级 or 统一上下文

不能只盯着目标元素调数值，得看它在哪一层“打架”：

• 想快速定位问题：逐级向上检查父元素的 Computed 样式，搜 transform、opacity 等关键词；临时注释掉可疑样式，观察是否恢复
• 必须保留动效又需要层级穿透？把目标元素用 JS 移到 document.body 下，配合 position: fixed 手动定位（适合弹窗、Tooltip）
• 更稳妥的长期方案：给共用父容器显式加 position: relative + z-index，让它成为统一的上下文根节点，避免碎片化隔离

真正难的不是写对那行 z-index，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的 transform 或 opacity。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！