父元素设置background时CSS伪元素被遮挡的解决方法

为元素应用:before或:after伪元素时，若其父元素设置了background属性，设置了负z-index的伪元素会被父元素背景遮挡隐藏。
实际表现：红色的伪元素被遮挡在黄色的父元素背景后方，作为伪元素宿主的蓝色元素可正常显示，未被遮挡。

复现代码 #

CSS样式 #

.parent {
  background: yellow;
}

#element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 4px solid black;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;
  position: absolute;
  z-index: -1;
  border: 4px solid black;
}

HTML结构 #

<div class="parent">
  <div id="element"></div>
</div>

该现象是CSS 层叠上下文 的默认规则导致：如果父元素和伪元素宿主元素都没有创建独立层叠上下文，设置了z-index: -1的伪元素会被排列到当前公共层叠上下文（默认是根元素创建的上下文）的最底层，位于父元素的背景层之后，视觉上就表现为被父元素背景遮挡。

以下方案均可直接解决该问题，可根据业务场景选择：

• 方案1：给伪元素的宿主元素（示例中的#element）添加非auto的z-index值
  给已设置定位的宿主元素加上z-index: 0即可，此时宿主元素会创建独立的层叠上下文，内部伪元素的z-index: -1只会相对于宿主元素排序，被放在宿主元素本身的下方，不会逃逸到父元素背景层之后。修改后的宿主元素样式：

  #element {
    position: relative;
    z-index: 0; /* 新增属性 */
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 4px solid black;
  }
  

• 方案2：给父元素添加isolation: isolate属性
  该属性会强制父元素生成独立层叠上下文，不会带来修改定位、透明度等副作用，父元素内部所有元素的层叠排序都会被限制在父元素范围内，负z-index的伪元素自然不会跑到父元素背景下方。修改后的父元素样式：

  .parent {
    background: yellow;
    isolation: isolate; /* 新增属性 */
  }
  

• 方案3：调整层叠顺序，放弃负z-index写法
  不给伪元素设置负z-index，让宿主元素创建独立层叠上下文后，将伪元素的z-index设为0，宿主元素本身的内容层设置更高的z-index，同样可以实现伪元素垫在宿主元素下方的效果，不会出现被父元素遮挡的问题。

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