是否可以将子块的子块置于父块的阴影下？

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/）

框阴影在 'yellow box'.

下

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

我已经尝试过 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>

是否可以将子块的子块置于父块的阴影下？

Is it possible to put a child of a child block under the parent's shadow?

html

css

box-shadow