<div>
<div class="box first">z-index: 3</div>
<div class="box second">z-index: 2</div>
<div class="box third">z-index: 1</div>
<div class="box fourth">no z-index</div>
<div class="box fifth">z-index: -1</div>
</div>
$box-color: darkorange;
.box {
width: 150px;
height: 150px;
border: 1px solid black;
position: fixed;
padding-left: 5px;
}
.first {
top: 40%;
left: 40%;
background: $box-color;
z-index: 3;
}
.second {
top: 34%;
left: 42%;
background: lighten($box-color, 10%);
z-index: 2;
}
.third {
top: 28%;
left: 44%;
background: lighten($box-color, 20%);
z-index: 1;
}
.fourth {
top: 22%;
left: 46%;
background: lighten($box-color, 30%);
}
.fifth {
top: 16%;
left: 48%;
background: lighten($box-color, 40%);
z-index: -1;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.