z-index not working with pseudo element, it is above the parent no matter what

Question

I am trying to stack two circles. One is the green circle (Parent), the white circle with the purple outline is the pseudo element. The white circle should be UNDER the green circle.

After applying z-index:-1 to the pseudo element, no changes are seen. Likewise if I apply z-index: 999 to the parent and z-index: -1 to the pseudo element.

Where am I going wrong here?

HTML:

 <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 (For codepens)



.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;
              }
            }
          }
        }

score 0 · Answer 1 · answered Feb 18 '23 at 19:27

Using transform will create a stacking context causing issues with the position and z-index of pseudo and parent element.

Alternate approach to get the desired effect would be to create the pseudo element in the main .settings div.

I'm not sure if it helps your purpose but you can try.

.settings {
  position: relative;
}

.settings .block__circle {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #00a99d;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.settings::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;
}

.settings__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-between;
}

.settings__inner>* {
  display: block;
  width: calc(50% - 5px);
  height: 175px;
  border: 1px solid red;
}

.settings__inner .block:nth-child(1) {
  border-radius: 0px 0px 40px 0px;
}

.settings__inner .block:nth-child(2) {
  border-radius: 0px 0px 0px 40px;
}

.settings__inner .block:nth-child(3) {
  border-radius: 0px 40px 0px 0px;
}

.settings__inner .block:nth-child(4) {
  border-radius: 40px 0px 0px 0px;
}

<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>

z-index not working with pseudo element, it is above the parent no matter what

1 Answers1