z-index 失效主因是未激活定位或父元素创建了独立层叠上下文：必须设 position: relative/absolute/fixed/sticky 才生效；opacity

z-index 失效，99% 不是数字不够大，而是它根本没被浏览器“看见”——要么没激活定位，要么被某个父元素悄悄关进了独立的层叠上下文里。

元素没设 position（非 static）就写 z-index

这是最直白也最容易漏掉的硬性前提：z-index 只对 position: relative、absolute、fixed 或 sticky 生效。默认 position: static 的元素，无论写 z-index: 9999 还是 -9999，浏览器直接忽略。

• 常见错误：给 <img alt="CSS布局中z-index失效的原因有哪些_排查层叠上下文对选择器的影响" > 或 <div> 直接加 <code>z-index，但没补 position: relative
• 浮动（float）也会让 z-index 归零，哪怕写了 position，也要注意是否被后续样式覆盖回 static
• 检查方式：在 DevTools 的 Styles 面板里搜 position，确认最终计算值不是 static

父元素触发了层叠上下文（stacking context）

只要某个祖先元素满足以下任一条件，它就自动成为新的层叠上下文根节点，其内部所有 z-index 都只在它内部生效，无法和外部兄弟元素比高低：

• opacity 小于 1（比如 opacity: 0.99）
• transform 不为 none（包括 translateZ(0)、scale(1)、rotate(0.0001deg)）
• filter 不为 none（哪怕只是 blur(0.1px)）
• will-change 设为 transform、opacity 等
• isolation: isolate
• position: fixed 或 sticky（即使没写 z-index）

检查方法：在 DevTools 中选中目标元素，右侧面板 Computed → 拉到底看 “Stacking context” 是否显示 “Yes”。然后往上逐级点父节点，找到第一个标为 “Yes” 但你没意识到它会触发上下文的元素——大概率就是它。


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

立即学习“前端免费学习笔记（深入）”；

两个元素根本不在同一层叠上下文中比较

比如一个弹窗嵌在 .content 里，顶部导航栏是平级的 .header，两者父级都没显式创建上下文，那它们各自处于浏览器默认生成的“根上下文”中，互不感知。此时谁盖谁，取决于 DOM 顺序（后写的盖先写的），而不是子元素的 z-index 值。

• 修复关键：找到它们最近的共同父容器，给它加上 position: relative 和 z-index: 0（或更高），让它成为统一的层叠上下文入口
• 不要只调子元素：子元素 z-index: 9999，父容器 z-index: 1，结果仍可能被兄弟容器（z-index: 2）整体压住
• Portal 类组件（如 Vue 的 v-model 弹窗）常因挂载位置深、父级带 transform 而失效；更稳妥的做法是把挂载点提到 document.body 下，再用 position: fixed 定位

动画/交互过程中 z-index 被覆盖或失效

CSS 动画常用 transform 和 opacity，但这两个属性本身就会触发新层叠上下文。如果只在动画关键帧里写 z-index，却漏了基础定位声明，动画一开，z-index 就彻底失能。

• will-change: transform 效果等同于 transform: translateZ(0)，也会提前建上下文——必须同步加 position: relative
• 避免对同一元素同时设 z-index 和 opacity: 0：半透明本身建上下文，可能抵消层级意图
• 某些框架（如 Ant Design Vue）的 popup 组件内部用了 transform 做入场动画，若外层容器也带 transform，就形成双重隔离，必须拔掉其中一层

真正麻烦的从来不是 z-index 本身，而是那个你没注意到、也没打算动、却默默拦路的父级样式——它可能藏在重置 CSS 里，可能来自某个 UI 库的默认 class，也可能是一行为了“硬件加速”随手加的 transform: translateZ(0)。