此问题在此处已有答案：

Why can't an element with a z-index value cover its child?（5个答案）
昨天关门了。
我正在尝试堆叠两个圆。一个是绿色圆（父），带有紫色轮廓的白色圆是伪元素。白色圆应该在绿色圆的之下。
在将z-index:-1应用于伪元素之后，没有看到任何变化，同样，如果我将z-index: 999应用于父元素，将z-index: -1应用于伪元素。
我到底哪里错了？

超文本：

<div class="settings">
                    <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 {
              display: block;
              width: rem(70);
              height: rem(70);
              border-radius: 50%;
              background: $green;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              &::after {
                z-index: -1;
                content: "";
                display: block;
                width: rem(80);
                height: rem(80);
                border-radius: 50%;
                background: #fff;
                z-index: -1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid $primary;
              }
            }
          }
          &__inner {
            display: flex;
            flex-wrap: wrap;
            gap: rem(5);
            justify-content: space-between;
            // each child, width 50%;
            > * {
              display: block;
              width: calc(50% - rem(5));
              height: rem(175);
              border: 1px solid $primary;
            }
            .block {
              &:nth-child(1) {
                border-radius: 0px 0px 40px 0px;
              }
              &:nth-child(2) {
                border-radius: 0px 0px 0px 40px;
              }
              &:nth-child(3) {
                border-radius: 0px 40px 0px 0px;
              }
              &:nth-child(4) {
                border-radius: 40px 0px 0px 0px;
              }
            }
          }
        }

CSS（对于共同依赖）

.settings {
          position: relative;
          .block {
            &__circle {
              display: block;
              width: 70px;
              height: 70px;
              border-radius: 50%;
              background: #00a99d;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              &::after {
                z-index: -1;
                content: "";
                display: block;
                width: 80px;
                height:80px;
                border-radius: 50%;
                background: #fff;
                z-index: -1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid red;
              }
            }
          }
          &__inner {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: space-between;
            // each child, width 50%;
            > * {
              display: block;
              width: calc(50% - 5px);
              height: 175px;
              border: 1px solid red;
            }
            .block {
              &:nth-child(1) {
                border-radius: 0px 0px 40px 0px;
              }
              &:nth-child(2) {
                border-radius: 0px 0px 0px 40px;
              }
              &:nth-child(3) {
                border-radius: 0px 40px 0px 0px;
              }
              &:nth-child(4) {
                border-radius: 40px 0px 0px 0px;
              }
            }
          }
        }