使叠加层显示在父div上方，但在该div的子像素之下

Question

我想要这样的输出：

实际结构为：

<div class="container">   <!-- green -->
  <div class="overlay">   <!-- purple -->
  </div>

  <div class="parent">    <!-- red -->
      <div class="child"> <!-- lightblue -->
          Child
      </div>
  </div>
</div>

经过半个小时的努力，我已经通过以下CSS实现了它：

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background: green;
  z-index: 1;
}

.overlay{
  background: purple;
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 2;
}

.parent {
    position: relative;
    background: red;
    width: 250px;
    height: 250px;
}

.child {
    z-index: 100;
    background: lightblue;
    width: 50px;
    height: 50px;
    position: relative;
}

（Fiddle demo）

我不明白的是：为什么不允许将.parent的z-index值设置为任何值？因为这样做会立即中断此顺序。如果我设置.parent{z-index: a;}，其中a是整数<= 1，则紫色覆盖层覆盖子项，但是如果a>=2，则.child和.parent两者都过来.overlay。

但是为什么它根本不能破坏任何东西？我至少希望z-index: 0;不破坏任何内容，因为它是底层的内容。我想念什么？

此外，如果我正在处理某个页面，其中由于页面的其他限制，z-index的{​​{1}}的{​​{1}}不能从其给定的整数值更改，是否有其他方法可以插入.parent及其.overlay之间的.parent？ （.child的位置和z-index在我手中）