CSS ::before 伪元素不考虑 z-index 堆叠上下文

Question

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

  .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

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

元素始终使用父元素的 z-index。如果父项 div 具有 z-index，则所有子项不能设置在较低的 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

Answer 3

::after 将其内容紧接在它所应用的标签的末尾之前插入但仍在标签内，z-index 不能低于标签的 z-index，所以你的方法赢了工作。但是您可以对父标记执行 ::after，在您的情况下它具有 class 'circle'。由于插入的内容是相对于wrapping标签的，所以需要调整与wrapping标签相关的content的位置。

查看 codepen 示例：

Codepen Example

在此处查看代码片段示例：

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

CSS ::before 伪元素不考虑 z-index 堆叠上下文

CSS ::before pseudo-element not respecting z-index stacking context

css

pseudo-element