在多个堆叠上下文及其子元素之间设置堆叠顺序

Question

我在弄清楚如何设置子元素的堆叠顺序时遇到麻烦，该子元素的父元素具有自己的堆叠上下文（使用transform：translate），以使子元素与其父元素的其他同级元素正确交互。

以下面的HTML / JSFiddle为例。我想让孩子们穿绿色衣服坐在它下面的蓝色盒子上方。

https://jsfiddle.net/j2x7gat1/1/

        

<div class="wrapper">

  <div class="box" style="transform: translate(10px, 100px);">
    <div>This is the containing box #1 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(40px, 300px);">
    <div>This is the containing box #2 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(70px, 500px);">
    <div>This is the containing box #3 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(100px, 700px);">
    <div>This is the containing box #4 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>
</div>

对应的CSS：

.wrapper {
  /* Empty */
}

.box {
  transform-style: flat;
  background: blue;
  position: absolute;
  width: 410px;
  height: 100px;
  padding: 25px;
  color: white;
  z-index: -1;
}

.menu {
  transform-style: flat;
  border-radius: 2px 0 2px 2px;
  border: solid 3px red;
  position: absolute;
  padding: 10px;
  top: 30px;
  right: 5px;
  height: 180px;
  width: 100px;
  z-index: 1;
  color: white;
  font-size: 13px;
  background: green;
}

我在StackOverflow和其他地方找到的文档似乎无法解决这种情况。

先谢谢了。