CSS ::before pseudo-element not respecting z-index stacking context [duplicate]-CodePudding

Why does my ::before pseudo-element not sit behind it's parent? I am creating a new stacking context and adding a z-index of -1.

codepen

  .panda {
    position: relative;
    border: 1.5vmin solid black;
    width: 45vmin;
    height: 45vmin;
    border-radius: 50%;
    background: #fff;
    z-index: 2;

    &: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;
    }
  }

CodePudding user response：

::after inserts its content immediately before the end of the tag it's applied to but still inside the tag, z-index couldn't be lower than the z-index of the tag, so your approach won't work. But you could do ::after to the parent tag, which in your case has class 'circle'. As the inserted content will be relative to the wrapping tag, you should adjust the position of the contend related to this tag.

See a codepen example:

Codepen Example

See a snippet example here:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.canvas {
    background: #573d0e;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .circle {
    width: 70vmin;
    height: 70vmin;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }

  .circle:after {
      content: '';
      position: absolute;
      z-index: 1;
      width: 15vmin;
      height: 15vmin;
      background: black;
      border-radius: 50%;
      top: 10vmin;
      left: 12vmin;
      box-shadow: 30vmin 0 #000;
    }

.panda {
    position: relative;
    border: 1.5vmin solid black;
    width: 45vmin;
    height: 45vmin;
    border-radius: 50%;
    background: #fff;
    z-index: 2;

  }

  .eyes {
      position: relative;

    > * {
        position: absolute;
        width: 11vmin;
        height: 15vmin;
        background: #000;
        border-radius: 70px / 100px;
        left: 8.7vmin;
        top: 9vmin;
        transform: rotate(12deg);

        &:before,
        &:after {
          content: '';
          position: absolute;
        }

        &:before {
            width: 4vmin;
            height: 6vmin;
            background: white;
            border-radius: 76px / 100px;
            left: 5vmin;
            top: 3.2vmin;
            transform: rotate(348deg);
        }

        &:after {
          width: 2vmin;
          height: 3vmin;
          background: black;
          border-radius: 76px / 100px;
          left: 6.3vmin;
          top: 5vmin;
          transform: rotate(348deg);
        }
    }

    :last-child {
        transform: scale(-1, 1) rotate(12deg);
        left: 22.3vmin;
    }
  }

  .snout {
        position: absolute;
        width: 25vmin;
        height: 18vmin;
        top: 23vmin;
        left: 8.5vmin;
        bottom: 5vmin;
        background: #fff;
        border-radius: 50%;
        border: 1.5vmin solid black;

        &:before {
            content: '';
            position: absolute;
            width: 1.5vmin;
            height: 5vmin;
            left: 10vmin;
            top: 7vmin;
            background: black;
        }
  }

  .nose {
    position: absolute;
    width: 10vmin;
    height: 7vmin;
    left: 5.7vmin;
    top: 0.5vmin;
    background: black;
    border-radius: 50% 50% 48% 52% / 21% 21% 79% 79%;
  }

  .mouth {
        position: absolute;
        width: 9.6vmin;
        height: 5vmin;
        border-radius: 50%;
        border-bottom: 1.5vmin solid black;
        bottom: 1.6vmin;
        left: 6vmin;
  }

    <div class="canvas">
        <div class="circle">
            <div class="panda">
                <div class="eyes">
                    <div></div>
                    <div></div>
                </div>
                <div class="snout">
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
            </div>
        </div>
    </div>

CodePudding user response：

.panda {
    position: relative;
    border: 1.5vmin solid black;
    width: 45vmin;
    height: 45vmin;
    border-radius: 50%;
    background: #fff;
    
    
  }
  .panda:after {
      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;
    }

<div class="panda"></div>

CodePudding user response：

Element always use the z-index of the parent. If a parent div has a z-index, all childs can't be set on a lower z-index. The minimum z-index always will be the parent one.

For you panda, the best solution is create a special div for ears out of ".panda" :

CSS :

.ears{
    position: absolute;
  z-index: 1;
  width: 15vmin;
  height: 15vmin;
  background: black;
  border-radius: 50%;
  top: 8vmin;
  left: 12vmin;
  box-shadow: 30vmin 0 #000;
}

HTML :

   <div class="canvas">
        <div class="circle">
          <div class="ears"></div>
            <div class="panda">
                <div class="eyes">
                    <div></div>
                    <div></div>
                </div>
                <div class="snout">
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
            </div>
        </div>
    </div>

You can fix ears on .circle. Live example : https://codepen.io/camillewemajin/pen/ExvYOBV