<div class="box box1">
  DIV #1<br>position: absolute;<br>z-index: 3;
</div>

<div class="box box2">
  DIV #2<br>position: absolute;<br>z-index: 2;
  
  <div class="box box4">
    DIV #4<br>position: absolute;<br>z-index: 1;
  </div>
  
  <div class="box box5">
    DIV #5<br>position: absolute;<br>z-index: 3;
  </div>

  <div class="box box6">
    DIV #6<br>position: absolute;<br>z-index: 4;
  </div>
</div>

<div class="box box3">
  DIV #3<br>position: absolute;<br>z-index: 1;
</div>

<div class="box box7">
  DIV #7<br>z-index: 4;
  
  <div class="box box8">
    DIV #8<br>position: relative;<br>z-index: 4;
  </div>
</div>

.box {
  text-align: center;
  border: 1px dashed #000;
  line-height: 1.6;
  vertical-align: middle;
  padding: 15px;
}


.box1,
.box2,
.box3 {
  position: absolute;
  height: 20%;
  width: 80%;
  left: 5%;
}

.box1 {
  top: 0;
  background: rgba(255, 221, 221, 0.7);
  z-index: 3;
}

.box2 {
  height: 60%;
  top: 15%;
  left: 10%;
  background: rgba(204, 255, 204, 0.7);
  z-index: 2;
}

.box3 {
  height: 20%;
  top: 70%;
  background: rgba(255, 221, 221, 0.7);
  z-index: 1;
}

.box4,
.box5,
.box6 {
  position: absolute;
  bottom: 5%;
}

.box4,
.box6 {
  height: 80%;
  background: rgba(255, 221, 221, 0.7);
}

.box4 {
  left: 5%;
  z-index: 1; 
}

.box5 {
  left: 2%;
  right: 2%;
  bottom: 30%;
  background: rgba(255, 255, 204, 0.7);
  z-index: 3;
}

.box6 {
  right: 5%;
  z-index: 4;
}

.box7 {
  margin-top: 470px;
  z-index: 4;
  background: rgba(204, 255, 204, 0.7);
  height: 80px;
  text-align: left;
}

.box8 {
  position: relative;
  z-index: 4;
  top: -450px;
  background: rgba(255, 255, 204, 0.7);
  width: 160px;
  height: 400px;
}