z-index 设了却不生效：先看父元素有没有形成层叠上下文

给元素写了很大的 z-index 却还是被盖住，最常见的原因不是 z-index 写小了，而是两个元素不在同一个层叠上下文里比较。z-index 只在同一个层叠上下文内部可比，一旦某个祖先自己形成了新的层叠上下文，它里面的子元素就被关进独立盒子，再大的 z-index 也越不出去压住外面的元素。本文用「弹层被同级卡片遮住」的场景，讲清层叠上下文的形成条件、会悄悄新建它的属性，以及对应修法。适用范围：现代桌面与移动浏览器。先给结论：z-index 不生效，先沿父链往上找，看有没有祖先因 position 加 z-index、opacity、变换或 flex 等形成了层叠上下文，把比较锁死在盒子里。

z-index 不生效？先看父元素

关键判断标准先放上：两个元素谁在上，取决于它们「最近的共同层叠上下文」里各自的层级，而不是全局谁的数字大。只要任意一个共同祖先形成了层叠上下文，比较就被限制在这个祖先内部。把这条标准记牢，你就不会再盲目地一直加大 z-index。

一、先把 z-index 的生效前提看清（适用与边界）

z-index 要想生效，元素必须处于一个能参与层叠的定位体系里。最基础的前提是元素得是「定位元素」——也就是 position 取值为 relative、absolute、fixed 或 sticky 之一。对一个 position: static 的元素写 z-index，浏览器会直接忽略它，这是新手第一个坑。边界要记牢：z-index 只在定位元素上有效，且比较只在同一个层叠上下文内进行，这两点缺一不可。

很多人以为 z-index 是全局排行榜，谁数字大谁在最上面。其实它更像「班级内部名次」：每个层叠上下文是一个班级，班级之间的高下由班级所在的盒子决定，班级内部才看 z-index。所以排查顺序永远是：先看两个元素是不是在同一个班里（同一个层叠上下文），再谈谁压谁。先把 CSS 教程里的定位与层叠基础过一遍，后面才不会在错误的方向上加数字。

另一个边界：z-index 取负值可以把元素压到父元素背景之下，但仍在父元素的层叠上下文内；它永远越不出自己所在的那个盒子。这个特性决定了「加大数值」在很多场景下根本无效。

二、层叠上下文是什么：为什么父元素会截断比较（介绍与对比）

层叠上下文（stacking context）是浏览器把元素按层级绘制时划分的「原子比较单元」。根元素 <html> 天然是一个层叠上下文，绝大多数时候你写的 z-index 都在这个根上下文里比较，所以看起来像全局有效。问题在于：一旦某个中间元素自己新建了一个层叠上下文，它就成了「子盒子」，它内部的 z-index 只在盒子内部排，盒子整体在父上下文里只占一个位置。

对比两种情况：如果弹层和遮住它的卡片都在根上下文里，给弹层写 z-index: 9999 就能压住卡片；如果弹层的某个祖先因为 opacity: 0.5 悄悄形成了层叠上下文，那么弹层的 z-index 只在这个祖先内部比，而这个祖先整体可能排在卡片后面，于是弹层永远被卡片盖住——无论你把弹层 z-index 写到多大。这就是「z-index 设了却不生效」的典型机理。理解 Css Secrets 教程里关于绘制顺序的章节，能帮你把这种「被盒子锁死」的直觉建立起来。

用一句话概括：z-index 比较的距离是「到最近的共同层叠上下文」，不是到根。排查时就沿着父链一级级往上看，找到那个共同祖先，问题往往就出在它身上。

三、哪些属性会悄悄新建层叠上下文（版本、输出）

新建层叠上下文的属性比多数人以为的要多。最直观的一类是「定位元素配合 z-index」：position 为 relative/absolute/fixed/sticky 且 z-index 不是 auto 时，该元素自身形成层叠上下文。这类最常见，也最好查。

但还有很多「隐式」触发器，往往是坑的来源：opacity 小于 1、transform 不是 none、filter 不是 none、will-change 指定了会创建上下文的属性、mix-blend-mode 不是 normal、perspective 不是 none、clip-path 不是 none，以及 isolation: isolate。这些属性哪怕你压根没写 z-index，也会让元素自立门户形成层叠上下文。版本差异上，现代浏览器对这些触发器的实现已趋于一致，但旧版 IE 对 opacity 和 transform 的行为有过差异，具体以你所用引擎的规范为准（推断）。

还有一类容易被忽略：Flex 和 Grid 容器里，子项的 z-index 即使 position 是 static 也会生效，而且某些 flex 布局会为子项隐式建立上下文。所以当你在弹性布局里遇到 z-index 反常时，Css Series 教程里对弹性子项层级的说明值得对照。把这份「隐式触发器清单」记在心里，排查时逐个排除，比盲目加数字高效得多。

沿父链找层叠上下文的排查顺序

四、六个让 z-index 失效的高频场景与修复（失败、排错）

场景一，祖先 opacity 小于 1。弹层祖先写了 opacity: 0.9 做淡入，结果弹层被同级卡片盖住。修复方式是把淡入动画放到弹层自身而不是祖先，或给弹层改用 visibility+transform 方案，避免祖先形成上下文。

场景二，祖先用了 transform。给容器加 transform: translateZ(0) 做渲染优化，顺带把它变成了层叠上下文，里面的浮层再大 z-index 也出不去。修复方式是把 transform 移出浮层的共同祖先，或把浮层提到那个祖先之外。

场景三，忘了写 position。给 position: static 的元素写 z-index 完全无效。修复方式是先补 position: relative（或 absolute），z-index 才真正生效。

场景四，两个元素不在同一上下文却硬比。A 在根上下文、B 在某个隐式盒子里，给 A 加 z-index 压不过 B 的盒子。修复方式是把 A 和 B 调整到同一个祖先之下，或去掉那个隐式触发属性。

场景五，z-index 写了负值却被父背景吃掉。负值能压到父内容下，但如果父元素自己也是上下文且背景不透明，看起来就像「消失了」。修复方式是不要把层级逻辑依赖负值，改用 DOM 顺序或独立盒子。

场景六，Flex 子项误用。在弹性容器里给子项写 z-index 期望全局生效，结果被容器层级规则限制。修复方式是理清弹性父项的上下文关系，必要时用 isolation 显式隔离。把这几类对照 CSS 参考手册里的属性清单，能快速定位是哪一条触发了上下文。

六个 z-index 失效场景对照

五、用 isolation 或调整 DOM 顺序验证（验证、输出）

确认是某个祖先形成了层叠上下文后，修法有两条路线。第一条是「显式隔离」：在不想被干扰的浮层容器上写 isolation: isolate，它会主动为这个容器建立一个独立的层叠上下文，让内部 z-index 的层级范围变得可控、可预测，不再受外部祖先牵连。这是最干净、副作用最小的做法，推荐优先用。

.modal-layer {
  isolation: isolate;   /* 主动建立独立层叠上下文，内部 z-index 自成一档 */
  position: relative;
  z-index: 1;
}

第二条是「调整 DOM 顺序与结构」：把浮层直接提升到那个隐式上下文的祖先之外，让它和要压制的元素回到同一个上下文里比较。验证方式很简单——改完后打开开发者工具的元素面板，逐个祖先检查「是否形成了层叠上下文」（看 computed 里有没有触发属性），确认浮层和目标元素的最近共同祖先不再有隐式盒子，再目测浮层是否能盖住目标。预期结果（未在本机执行）：浮层层级恢复可控，无论目标在同页何处都能正确覆盖。如果还是盖不住，继续沿父链往上查下一个可能的触发器，别在同一个盒子内反复加数字。

与「无脑把 z-index 写到 999999」相比，找准上下文再用 isolation 或调整结构才是治本；代价是多花两分钟查父链，换来的是层级逻辑可预测、不会哪天被一个新加的 transform 悄悄打破。

总结

z-index 设了却不生效，根因几乎都是「比较被锁在了一个层叠上下文盒子里」。排查顺序是：确认元素本身是定位元素且 z-index 非 auto，再沿父链往上找有没有祖先因为 opacity、变换、filter、will-change、isolation 或 Flex 子项等属性自己形成了层叠上下文。修复优先用 isolation: isolate 显式隔离，或把浮层提到隐式盒子之外、调整 DOM 顺序。记住 z-index 比的是「最近共同层叠上下文」，不是全局数字大小，方向对了一次就能修好。

常见问题

Q：给 position: static 的元素写 z-index 为什么没用？

因为 z-index 只在定位元素（relative/absolute/fixed/sticky）上生效，static 元素会被浏览器忽略。先补上合适的 position，z-index 才会参与层叠。

Q：明明没写 z-index，为什么祖先还是形成了层叠上下文？

opacity 小于 1、transform/filter 非 none、will-change、mix-blend-mode、perspective、clip-path 等属性都会隐式新建上下文，并不需要显式写 z-index。

Q：isolation: isolate 和普通加 z-index 有什么区别？

isolation 是主动为容器建立一个独立、干净的比较盒子，让内部层级可控、不受外部祖先牵连；它比盲目堆大数字更可预测，也避免误伤其他元素的层级。

延伸学习

CSS 垂直居中方法 — 一篇把定位与层级常见坑串起来的站内笔记，和本文互为补充。
CSS 入门课程 — 想系统补一遍 CSS 基础，可以跟这套课程。
CSS3阴影生成器 — 顺手调阴影效果的站内小工具，避免为了加阴影而误触发层叠上下文。