使用transform后z-index失效，如何将子元素置于父元素下方？

当父元素添加transform属性后，会强制创建新的堆叠上下文，此时子元素（包括伪元素）的z-index仅在该上下文内部生效，无法突破到父元素的堆叠层级之外——哪怕设为-1，也只能在父元素的堆叠上下文里排在底层，而无法真正跑到父元素的下方。

给你两种可行的解决方案：

方案一：将transform移到外层容器 #

把父元素的居中逻辑（transform: translate(-50%, -50%)）转移到一个外层容器上，让原父元素脱离这个堆叠上下文，这样伪元素的z-index就能正常生效：

<style>
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .container {
    width: 1000px;
    height: 500px;
    background-color: green;
    position: relative;
  }

  .container::after {
    content: "";
    width: 50%;
    height: 50%;
    background-color: orangered;
    position: absolute;
    bottom: -10%;
    left: -10%;
    z-index: -1;
  }
</style>
<div class="wrapper">
  <div class="container"></div>
</div>

方案二：用兄弟元素替代伪元素 #

放弃伪元素，改用一个和父元素同级的兄弟元素，通过相同的居中定位逻辑放在父元素下方：

<style>
  .container {
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: green;
    transform: translate(-50%, -50%);
  }

  .overlay {
    width: 50%;
    height: 50%;
    background-color: orangered;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: -10%;
    left: -10%;
    z-index: -1;
  }
</style>
<div class="overlay"></div>
<div class="container"></div>

核心逻辑是：让需要置于下方的元素脱离父元素的堆叠上下文，这样它的z-index就能相对于更高层级的上下文（比如body）生效，从而排在父元素的下方。

内容的提问来源于stack exchange，提问作者KAN