CSS ::before伪元素不遵循z-index层叠上下文无法位于父元素后方问题

• 你的父元素.panda设置了position: relative + 非auto的z-index: 2，触发创建了独立的层叠上下文
• 层叠上下文的所有后代元素（包括::before伪元素）的层叠排序被完全限制在该上下文内部，无论后代设置怎样的z-index，都无法突破上下文范围，跑到创建该上下文的父元素本身的后方
• 按照层叠顺序规则，同一层叠上下文内负z-index元素的层级仅高于父元素的背景和边框，低于父元素的内容层，因此你的伪元素会被父元素的白色背景完全遮挡，无法呈现出在父元素后方的效果

你只需要移除父元素的z-index: 2属性即可：

.panda {
  position: relative;
  border: 1.5vmin solid black;
  width: 45vmin;
  height: 45vmin;
  border-radius: 50%;
  background: #fff;
  /* 删除z-index: 2，父元素z-index回到默认的auto，就不会创建层叠上下文 */

  &:before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 15vmin;
    height: 15vmin;
    background: black;
    border-radius: 50%;
    top: -4vmin;
    left: -2.1vmin;
    box-shadow: 30vmin 0 #000;
  }
}

父元素z-index为默认的auto时，不会创建独立层叠上下文，此时伪元素的z-index: -1会相对于更上层的层叠上下文排序，自然就会显示在父元素的后方。

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