z-index在伪元素上失效：伪元素始终位于父元素上方的问题排查

问题根源 #

你设置的::after伪元素是.block__circle的子元素，而父元素.block__circle拥有不透明的绿色背景。根据CSS堆叠上下文规则：父元素的背景层优先级高于其子元素的所有堆叠层级，哪怕子元素设置z-index: -1，也只能处于父元素的内容区域下方，会被父元素的背景完全遮挡，因此看不到预期效果。

解决方案 #

方案一：交换元素角色（无需修改HTML） #

让.block__circle本身作为底层的白色带边框圆形，用伪元素实现上层的绿色圆形，利用伪元素默认的堆叠层级覆盖父元素背景：

.settings {
  position: relative;
  .block {
    &__circle {
      display: block;
      width: rem(80);
      height: rem(80);
      border-radius: 50%;
      background: #fff;
      border: 1px solid $primary;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      
      &::after {
        content: "";
        display: block;
        width: rem(70);
        height: rem(70);
        border-radius: 50%;
        background: $green;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  // 保留settings__inner原有样式
}

方案二：使用兄弟元素替代伪元素（修改HTML结构） #

给.block__circle添加一个兄弟元素作为底层圆形，通过z-index控制层级：

修改后的HTML：

<div class="settings">
  <div class="block__circle-bg"></div>
  <div class="block__circle"></div>
  <div class="settings__inner">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

对应的SCSS：

.settings {
  position: relative;
  .block {
    &__circle-bg {
      display: block;
      width: rem(80);
      height: rem(80);
      border-radius: 50%;
      background: #fff;
      border: 1px solid $primary;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    &__circle {
      display: block;
      width: rem(70);
      height: rem(70);
      border-radius: 50%;
      background: $green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
  }
  // 保留settings__inner原有样式
}

说明 #

两种方案都能实现“白色圆形在绿色圆形下方”的效果：方案一无需改动HTML，代码更简洁；方案二的层级关系更直观，适合后续需要对两个圆形分别添加交互逻辑的场景。

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