CSS Positioning: z-index

How to make an element position on top of another element?

HTML

<div class="parent-1">
  <div class="box-1 a">Box 1</div>
  <div class="box-2 a">Box 2</div>
  <div class="box-3 a">Box 3</div>
</div>

<div class="parent-2">
  <div class="box-1 b">Box 1</div>
  <div class="box-2 b">Box 2</div>
  <div class="box-3 b">Box 3</div>
</div>

SCSS

[class^=parent-] {
  position: relative;
  border: 3px solid skyblue;
  margin-bottom: 5px;
}

[class^=box-] {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
}

.box-1 {
  right: -40px;
}

.box-2 {
  top: 40px;
}

.box-3 {
  right: 40px;
  bottom: -80px;
}

.parent-1 {
  z-index: 1;
}

.parent-2 {
  z-index: 2;
}

.a.box-2 {
  z-index: 100; /* why this is not working? */
}

.a.box-1 { background-color: gold; }
.a.box-2 { background-color: tomato; }
.a.box-3 { background-color: turquoise; }
.a.box-4 { background-color: darkcyan; }

.b.box-1 { background-color: darken(gold, 20%); color: white }
.b.box-2 { background-color: darken(tomato, 20%); color: white }
.b.box-3 { background-color: darken(turquoise, 20%); color: white }
.b.box-4 { background-color: darken(darkcyan, 20%); color: white }