<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;
}