是否可以将一个孩子块的孩子放在父母的阴影下？

Question

我有如下代码：

.motherbox {
  position: relative;
  width: 100px;
  height: 50px;
  box-shadow: 0 5px 2px 0;
  background: green;
  z-index: 10;
}

.child {
  position: relative;
  width: 50px;
  height: 100px;
}

.text,
.window {
  width: 50px;
  height: 50px;
}

.text {
  background: red;
}

.window {
  position: relative;
  background: yellow;
  z-index: 1;
}

<div class="motherbox">
  <div class="child">
    <div class="text"></div>
    <div class="window"></div>
  </div>
</div>

（也位于this answer）

阴影框在“黄色框”下方。

是否可以将子框的一部分（黄色框）放在阴影下？

我已经尝试过z-index，但没有结果。

需要的输出：绿色框阴影下的黄色框，绿色框顶部的红色框。

Answer 1

只需从母箱中删除所有z-index，您就可以通过指定负的z-index将元素放在其后：

.motherbox {
  position: relative;
  width: 100px;
  height: 50px;
  box-shadow: 0 5px 2px 0;
  background: green;
}

.child {
  position: relative;
  width: 50px;
  height: 100px;
}

.text,
.window {
  width: 50px;
  height: 50px;
}

.text {
  background: red;
}

.window {
  position: relative;
  background: yellow;
  z-index: -1;
}

<div class="motherbox">
  <div class="child">
    <div class="text"></div>
    <div class="window"></div>
  </div>
</div>