<style>
body {
margin-top: 100px;
}
div {
opacity: 0.7;
border: 4px dotted;
margin-top: -40px;
text-align: center;
}
.first {
width: 200px;
height: 400px;
position: absolute;
background: blue;
z-index: 1;
}
.second {
width: 300px;
height: 300px;
position: relative;
background: red;
z-index: -1;
}
.third {
width: 400px;
height: 150px;
background: green;
z-index: 2;
}
...
</style>
<div class="first">First element</div>
<div class="second">Second element</div>
<div class="third">Third element</div>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.