JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="fix">Alex Thomas - Fixed</div>
    <div id="rel">Alex Thomas - Relative</div>
    <div id="abs">Alex Thomas - Absolute</div>
</div>

CSS

#wrap {height:100px; width:100px; border:20px solid red; overflow:hidden;}
#wrap div {top:30px; left:48px; width:150px;}
#wrap div#fix, #wrap div#abs {margin-left:20px;}
#wrap div#fix {position:fixed; background-color:rgba(255, 0, 0, 0.4);}
#wrap div#rel {position:relative; background-color:rgba(0, 255, 0, 0.4);}
#wrap div#abs {position:absolute; top:70px; background-color:rgba(0, 0, 255, 0.4);}