<div class="parent-box">

    <div class="box box-1">z-index:4</div>
    <div class="box box-2">z-index:1</div>
    <div class="box box-3">z-index:2</div>
    <div class="box box-4">z-index:5</div>
    <div class="box box-5">z-index:3</div>

</div>

.parent-box {
  position: relative;
  padding 10px;
  height: 90vh;
}

.box {
  position: fixed;
  border: 1px solid black;
  background-color: rgb(147,112,219);
  width: 100px;
  height: 100px;
  padding-left: 10px;
}

.box-1 {
  top: 34%;
  left: 42%;
  background-color: rgba(147,112,219, 0.8);
  z-index: 4;
}

.box-2 {
  top: 16%;
  left: 48%;
  background-color: rgba(147,112,219, 0.2);
  z-index: 1;
}

.box-3 {
  top: 22%;
  left: 46%;
  background-color: rgba(147,112,219, 0.4);
  z-index:2;
}

.box-4 {
  top: 40%;
  left: 40%;
  background-color: rgba(147,112,219, 1);
  z-index:5;
}

.box-5 {
  top: 28%;
  left: 44%;
  background-color: rgba(147,112,219, 0.6);
  z-index:3;
}