html - 当父级的父级也具有绝对位置时，z-index 在伪位置绝对位置

Question

我想要这样的顺序：红色下面，红色下面蓝色，橙色下面，橙色的伪应该在橙色和蓝色之间。所以起作用的是具有不同z-index值的 div 的顺序：5、10 和 15（红色、蓝色和橙色框）。对于伪，我使用了比z-index橙色更小的，但蓝色更大，并希望它低于橙色但高于蓝色框。有些东西不起作用。这些position值必须是这样的，也许这些position值的组合z-index是错误的。有任何想法吗？

.wrapper {
  background-color: lightcoral;
  border: 5px solid #650c0c;
  height: 300px;
  position: relative;
  width: 500px;
  z-index: 5;
}

.box-absolute {
  position: absolute;
  left: 0;
  top: 20px;
  background-color: lightblue;
  border: 5px solid #235e71;
  width: 300px;
  height: 300px;
  z-index: 10;
}

.box-child {
  border: 5px solid #cc8400;
  background-color: orange;
  width: 150px;
  height: 200px;
  position: relative;
  z-index: 15;
}

.box-child::before {
  content: 'between orange and blue';
  position: absolute;
  border: 3px dashed #116e11;
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  z-index: 14;
  top: -15px;
  left: 20px
}

<div class="wrapper">
  below all
  <div class="box-absolute">
    above red but below orange+pseudo
    <div class="box-child">
      above all
    </div>
  </div>
</div>

标签： htmlcsscss-positionz-indexpseudo-element