JSFiddle - React, Tailwind, and code Playground

HTML

<div class="relativeContainer">
  <div class="relative block">relative 1</div>
  <div class="relative block">relative 2</div>
  <div class="absoluteTopZero block">absolute top 0</div>
  <div class="absoluteTopInherited block">absolute</div> 
</div>

CSS

.relativeContainer{
  position:relative;
  background-color: #ff5555;
  height: 100px;
  
}

.block{
  height: 20px;
  width: 100px;
  border-bottom: 1px solid white;
  display: block;
}

.relative{
  position: relative;
  background-color: lightblue;
}

.absoluteTopZero{
  position: absolute;
  top: 0px;
  left: 100px;
  background-color: yellow;
}

.absoluteTopInherited{
  position: absolute;
  left: 100px;
  background-color: orange;
}