<div class="wrapper">
  <div class ="default">
    <div class = "normal"></div>
    <div class = "absolute"></div>
    <div class = "normal"></div>
    <div class = "relative"></div>
    <div class = "normal"></div>
  </div>
  <div class ="positioned abs">
    <div class = "normal">Static</div>
    <div class = "absolute">Absolute</div>
    <div class = "normal">Static</div>
    <div class = "relative">Relative</div>
    <div class = "normal">Static</div>
  </div>
  <div class ="positioned rel">
    <div class = "normal">Static</div>
    <div class = "absolute">Absolute</div>
    <div class = "normal">Static</div>
    <div class = "relative">Relative (left: -20px)</div>
    <div class = "normal">Static</div>
  </div>
</div>  

.wrapper{
  width:80%;
  margin: 8vh auto;
  height: 360px;
  display: flex;
  flex-direction: column;  
  justify-content: space-between;
}
.default,
.positioned{
  display: flex;   
}
.default>div,
.positioned>div{
  width: 100px;
  height:100px;  
  opacity: 0.6;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-align: center;
}
.normal{
  background: #B4D473;
}
.absolute{
  background: #59C4E6;  
}
.relative{
  background:  #F253A7;
}
.abs>.absolute{
  position: absolute;
  place-items: end center;
}
.rel>.relative{
  position: relative;  
  left: -20px; 
}