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

Question

I have code that looks like this:

.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>

(Also at https://jsfiddle.net/sajphu2r/1/)

Box-shadow is under the 'yellow box'.

Is it possible to put that part of a child box(the yellow box) under the shadow?

I've already tried z-index with no result.

Output needed: yellow box under the shadow of green box, red box on top of the green box.

Answer 1

Simply remove any z-index from the motherbox and you will be able to place your element behind it by specifying a negative 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>