CSS Z Index

by Krishna Ananthi

HTML

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>

CSS

.a {
  width: 50px;
  height: 50px;
  background-color: red;
 }

.b,
.c,
.d {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  margin-bottom : 5px;
}

.b {
  background-color: green;
  z-index:1;
  left: 5px;
}

.c {
  background-color: blue;
  left: 10px;
  z-index:2;
}

.d {
  background-color: pink;
  left: 15px;
  z-index:3;
  position: absolute;
  top: 0
}