position fixed元素伪元素层级异常的CSS问题及修复请求

这个问题的核心是fixed定位元素会强制创建独立的堆叠上下文，而默认情况下relative/absolute元素只有在设置了非auto的z-index时才会触发堆叠上下文。

当父元素为fixed时，其内部堆叠层级的顺序是：父元素背景 → z-index为负的子元素（含伪元素） → 父元素文本内容。这就导致伪元素会卡在背景和文本之间，无法像relative/absolute父元素那样被完全压在后方。

解决方案1：给父元素套一个fixed容器 #

把fixed定位移到父元素的外层容器上，让父元素用relative定位（默认z-index:auto，不创建堆叠上下文），这样伪元素的z-index:-1就能正常跑到父元素后方，和relative定位的表现一致。

/* 外层容器负责fixed定位 */
.fixed-container {
  position: fixed;
}

/* 父元素用relative，保持原有样式 */
.fixed-container div {
  width: 200px;
  height: 100px;
  position: relative;
  background: black;
  color: white; /* 加白色文本方便观察效果 */
}

/* 伪元素写法不变 */
.fixed-container div::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  z-index: -1;
}

<div class="fixed-container">
  <div>example</div>
</div>

解决方案2：将伪元素改为fixed定位 #

把伪元素的定位改成fixed，让它脱离父元素的堆叠上下文，直接在根堆叠上下文里排序。此时伪元素的z-index:-1会被父元素（fixed定位，默认z-index:auto）覆盖，实现完全在后方的效果。

div {
  width: 200px;
  height: 100px;
  position: fixed;
  background: black;
  color: white;
  top: 0;
  left: 0;
}

div::after {
  content: "";
  position: fixed; /* 改为fixed定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
  z-index: -1;
}

<div>example</div>

内容的提问来源于stack exchange，提问作者gobler