<div class="first">
<div class="child-of-first">child of first</div>
</div>
<div class="second"></div>
body {
background: #282828;
}
.first,
.second {
position: relative;
width: 150px;
height: 150px;
background: red;
z-index: 1;
}
.second {
background: blue;
margin-top: -75px;
margin-left: 75px;
z-index: 2;
}
.child-of-first {
position: absolute;
top: 80px;
left: 30px;
background: #ffffff;
z-index: 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.