SOURCE

<div id="box1" class="box">
  <div id="child1" class="child"></div>
  <div id="child2" class="child"></div>
</div>
<div id="box2" class="box">
  <div id="child3" class="child"></div>
  <div id="child4" class="child"></div>
</div>

.box{
  position:relative;
  width: 200px;
  height: 200px;
}
.child{
  position:absolute;
  width: 30px;
  height: 30px;
}
#box1{
  background: red;
  bottom: 0px;
  z-index:1;
}
#box2{
  background: blue;
  z-index:0;
}

#child1{
  background: yellow;
  bottom: -10px;
  z-index:-1;
}
#child3{
  background: green;
  top: 0;
  z-index:100;
}