CSS Positioning: z-index

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

HTML

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

CSS

.parent {
  width: 90%;
  border: 3px solid skyblue;
}

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

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

.box-2 {
  top: 20px;
}

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


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