将子级的z-index设置为低于父级？

Question

<div class="parent">
  z-index = 10
  <div class="child">
    z-index = -1
  </div>
</div>

<div class="neighbor">
  z-index = 5
</div>

我有三个元素，我想具有以下堆栈顺序：

1. .parent（顶部）
2. .neighbor
3. .child（底部）

但是，正如您在codepen中看到的那样，我无法让child处于最低位置。

我在做什么错了？