固定定位元素与伪元素层级调整：将伪元素置于元素后方

当元素与其伪元素均为fixed定位时，要让伪元素置于元素后方，核心是通过z-index控制堆叠优先级，具体调整如下：

修改你的CSS代码，给父元素设置明确的z-index值，同时给伪元素设置更低的z-index：

.nav {
  background: white;
  position: fixed;
  z-index: 1; /* 明确父元素的堆叠层级 */
}

.nav::before {
  content: '';
  background: black;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1; /* 让伪元素层级低于父元素 */
}

<nav class="nav">
  Nav content
</nav>

原理说明 #

fixed定位的元素会自动生成独立的堆叠上下文，伪元素作为父元素的子元素，默认层级比父元素的内容更高，所以会盖在导航栏上方。给伪元素设置z-index: -1，会把它压到父元素堆叠上下文的最底层，自然就显示在白色导航栏的后方；给父元素加z-index: 1是为了确保导航栏本身能在页面其他元素之上（如果页面存在其他fixed定位元素），同时也能更清晰地定义层级关系。

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