Playing with z-index

by asemahle

HTML

<div class="a">
  <div class="high"></div>
  <div class="low"></div>
</div>
<div class="b">
  <div class="high"></div>
  <div class="low"></div>
</div>
<div class="c">
  <div class="high"></div>
  <div class="low"></div>
</div>

CSS

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

.high {
  width: 50px;
  height: 25px;
  top: 10px;
  left: 25px;
  background-color: black;
}
.low {
  width: 50px;
  height: 25px;
  bottom: 10px;
  left: 25px;
  background-color: grey
}

.a .low {
  z-index: 50;
}

.b .low {
  z-index: 51
}

.a {
  background-color: red; 
}
.b {
  background-color: blue;
  top: 25px;
  left: 25px;
  z-index: 0;
}
.c {
  background-color: green;
  top: 50px;
  left: 50px;
}