<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;
}