哪些 CSS 属性会创建层叠上下文？为什么 z-index 写到 9999 还是盖不住？

弹窗写了 z-index: 9999 还被盖住

这是项目里最常见的场景。弹窗组件放在某个区块里，区块有淡入动画，用了 opacity。页面上的吸顶导航 z-index: 10，结果弹窗打开时被导航盖住了一截。

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.section {
  opacity: 0.99; /* 动画残留，小于 1 就创建了层叠上下文 */
}

.section .modal {
  position: fixed;
  z-index: 9999; /* 只在 .section 内部有效 */
}

/* 结果：.section 整体按层级 0 和 .header 的 10 比较，
   .modal 虽然是 9999，也只能跟着 .section 排在 .header 下面 */

怎么修

最稳的办法是把弹窗挂到 body 下面，React 用 createPortal，Vue 用 Teleport，这样弹窗就不受中间任何祖先的上下文影响。其次是去掉祖先上不必要的 opacity、transform，或者给 .section 本身设一个比导航大的 z-index，但后者会把整个区块都抬上去，往往不是想要的效果。

层叠上下文内部怎么排

在同一个上下文里，元素从下到上大致分成七层：上下文根元素的背景和边框，z-index 为负的子上下文，普通块级元素，浮动元素，行内元素，z-index 为 auto 或 0 的定位元素，z-index 为正的子上下文。同一层里后出现的盖住先出现的。

为什么负 z-index 的子元素还在父元素背景上面

子元素设了 z-index: -1，很多人以为它会跑到父元素后面去。如果父元素本身创建了层叠上下文，父元素的背景就是这个上下文的最底层，负 z-index 的子元素只能排在背景上面、普通内容下面。只有父元素不创建上下文时，子元素才可能钻到父元素背景后面，一直沉到更外层的上下文里。

opacity 和 transform 为什么也会创建

它们需要把元素和所有子元素当成一整块来处理。opacity: 0.5 要先把整块画好，再整体变半透明；如果子元素能和外面的元素交错排序，这一步就没法做。所以浏览器规定这些属性必须形成独立的上下文。filter、mask、mix-blend-mode 也是同样的原因。

容易答错的地方

以为 z-index 越大就一定在上面

z-index 只在同一个层叠上下文里比较大小。两个元素分属不同上下文时，比的是它们各自往上找到的、处在同一上下文里的祖先。所以排查遮挡问题时先看祖先，不要先去改数字。

以为只有定位元素才会创建层叠上下文

opacity、transform、filter、will-change、contain: paint 这些和定位无关的属性都会创建。尤其是动画库给元素加的 transform 和 opacity，经常在不知不觉中制造出层叠上下文。

以为 position: relative 就会创建层叠上下文

单独的 position: relative 或 absolute 不会，必须同时设置了不为 auto 的 z-index。fixed 和 sticky 例外，在现代浏览器里它们自己就会创建。

面试官还会怎么问？

把知识连起来