CSS ::before伪元素不尊重z-index堆叠上下文[重复]

Question

为什么我的::before 伪元素不在它的父元素后面？我正在创建一个新的堆叠上下文并添加一个 -1 的 z-index。

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

Answer 1

::after 将其内容插入它所应用的标签的末尾之前，但仍在标签内，z-index 不能低于标签的 z-index，因此您的方法将不起作用。但是您可以对父标签执行::after，在您的情况下，它具有类'circle'。由于插入的内容是相对于包装标签的，因此您应该调整与该标签相关的竞争位置。

查看代码笔示例：

Codepen Example

在此处查看 sn-p 示例：

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

Answer 2

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

Answer 3

元素总是使用父元素的 z-index。如果父 div 具有 z-index，则所有子 div 不能设置在较低的 z-index 上。最小 z-index 始终是父级。

对于你的熊猫，最好的解决方案是用“.panda”为耳朵创建一个特殊的 div：

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>

您可以在 .circle 上修复耳朵。实例：https://codepen.io/camillewemajin/pen/ExvYOBV