z-index in pseudo position absolute when parent of parent has also position absolute

Question

I would like to have this order: Red below all, blue below red, orange below all and the pseudo of orange should be between orange and blue. So what works is the order of the divs with different z-index values: 5, 10 and 15 (red, blue and orange box). For the pseudo I used a smaller z-index then orange, but a greater the blue and expected it to be below the orange but above the blue box. Something does not work. The position values have to be like this, maybe the combination of the position values with z-index is wrong. Any ideas?

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