#a {
background: rgba(233, 30, 99, 0.5);
}#b, #c, #d, #e {
position: absolute;
}#b {
background: rgba(103, 58, 183, 0.8);
bottom: 120px;
width: 410px;
z-index: 2;
}#c {
background: rgba(255, 235, 59, 0.8);
top: 190px;
z-index: 1;
}#d {
background: #03a9f4;
height: 500px;
top: 10px;
z-index: -1;
}#e {
background: rgba(255, 87, 34, 0.7);
top: 110px;
z-index: 1;
}ThiswillproducethestackingordershowninFigure4.7.Thebottom-mostlayer
is#dbecauseitsz-indexvalueis-1.Since#aisn’tpositioned,itsitsabove#d,but
belowthepositionedelements(#b,#c,and#e).Thenextlayeris#c,followedby
#e.Sincebothelementshavethesamez-indexvalue,#eisstackedhigherbecause
it’slastinthesourceorder.Thetop-mostlayeris#b,duetoitsz-indexof 2.138 CSS Master