z-Index stacking - position relative

by Ben Clayton

HTML

<div class="wrapper">

  <div class="el1">
    RED
  </div>

  <div class="el2">
    BLUE
  </div>

</div>

when applying z-index you need to explicitly put position:relative on the elements you are trying to stack in a certian order, if you want them stacked in a different order to the natural order the elements are in the html.

CSS

.wrapper {
  position: relative;
}

.el1 {
  color: red;
  font-size: 120px;
  z-index: 2;
  position: relative;
}

.el2 {
  color: blue;
  top: -100px;
  font-size: 100px;
  z-index: 1;
  position: relative;
}