<div class="container">
  <div id="first">
    First
    <div class="descendant">
      descendant
    </div>
  </div>
  <div id="second">Second</div>
  <div id="third">Third</div>
</div>
body {
  background-color: #eee;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 500px;
  min-height: 400px;
  background-color: white;
  margin: 0 auto;
  position: relative;
}

#first,
#second,
#third {
  position: absolute;
  /* general styles */

  width: 100px;
  height: 100px;
  color: white;
  opacity: 0.95;
  padding: 15px;
  line-height: 150px;
  text-align: center;
}

#first {
  z-index: 1;
  background-color: deepPink;
  top: 50px;
  left: 50px;
  line-height: 1;
}

.descendant {
  height: 70px;
  width: 150px;
  background-color: black;
  line-height: 100px;
  bottom: 10px;
  position: absolute;
  z-index: 10;
}

#second {
  z-index: 2;
  background-color: #0099CC;
  top: 100px;
  left: 170px;
}

#third {
  background-color: green;
  top: 210px;
  left: 110px;
}