html - 是否可以将子 block 的子 block 置于父 block 的阴影下？

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>

(也在 https://jsfiddle.net/sajphu2r/1/ )

Box-shadow 在'黄框'下。

是否可以将子框(黄色框)的那部分放在阴影下？

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

需要输出:绿色框阴影下的黄色框，绿色框上方的红色框。

Answer 1

只需从 motherbox 中删除任何 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>