JSFiddle - React, Tailwind, and code Playground

HTML

<p>scenario 1 : left :0; top : 0;</p>
<div class="main">
    static
    <div class="static"></div>
</div>
<div class="main">
    relative
    <div class="relative"></div>
</div>   
 <div class="main">
     absolute
    <div class="absolute"></div>
</div>   

<p>scenario 2 :  left :20px; top : 20px;</p>

<div class="main">
    static
    <div class="static2"></div>
</div>
<div class="main">
    relative
    <div class="relative2"></div>
</div>   
 <div class="main">
     absolute
    <div class="absolute2"></div>
</div>

CSS

p{
    clear:both;
}
.main{
    width:100px;
    height:100px;
    position:relative;
    border:1px solid red;
    margin:20px;
    float:left;
}
.static{
    width:50px;
    height:50px;
    position:static;
    left :0;
    top:0;
    border:1px solid green;
}
.relative{
    width:50px;
    height:50px;
    position:relative;
    left :0;
    top:0;
    border:1px solid green;
}
.absolute{
    width:50px;
    height:50px;
    position:absolute;
    left :0;
    top:0;
    border:1px solid green;
}

.static2{
    width:50px;
    height:50px;
    position:static;
    left :20px;
    top:20px;
    border:1px solid green;
}
.relative2{
    width:50px;
    height:50px;
    position:relative;
    left :20px;
    top:20px;
    border:1px solid green;
}
.absolute2{
    width:50px;
    height:50px;
    position:absolute;
    left :20px;
    top:20px;
    border:1px solid green;
}