JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
    I'll be a <strong>fixed</strong> div and always stay at the same position with respect to other things on the page.
</div>

<div id="box2">
    My position is <strong>absolute</strong> with respect to the origin 0,0
    of the viewport.
</div>

<div id="container">
    I am a parent div.
    <div id="overlay">
        I am positioned relative to my parent. 
    </div>
</div>

<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum magna in vulputate vestibulum. Vestibulum sagittis, arcu ac viverra gravida, libero elit congue libero, vel venenatis ante dolor ut risus. Integer vel magna porta, suscipit libero a, vehicula eros. Phasellus finibus risus non volutpat semper. Phasellus sit amet pellentesque diam, sit amet hendrerit quam. Donec purus nisl, fringilla ut nibh in, facilisis ultrices nibh. Integer bibendum arcu ut accumsan accumsan. Nulla quis sem ut risus tincidunt placerat. Nulla dapibus magna lectus, nec luctus massa vestibulum vel. Nam venenatis neque nibh, a finibus nulla dignissim vel. Vestibulum ut pretium neque. Pellentesque mollis tellus id mauris ornare semper. Sed eget elit arcu.
</p>
<p>
Fusce bibendum porta nunc non semper. Praesent ut mi quis nibh finibus commodo. Aenean quis sagittis est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras faucibus magna vehicula metus tincidunt, ac porttitor ante tincidunt. Phasellus et congue leo, sit amet suscipit odio. Quisque sagittis nisl at aliquam placerat. Sed molestie, tellus sed elementum iaculis, nulla justo tempus erat, sit amet varius mi nisl ac risus. In condimentum ornare dolor ac commodo. Curabitur malesuada, leo eu placerat porttitor, elit enim malesuada magna, quis cursus lorem massa sit amet nibh.
</p>

<p>
Fusce bibendum porta nunc non semper. Praesent ut mi quis nibh finibus commodo. Aenean quis sagittis est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...

CSS

#box1 {
    position: fixed;
    bottom: 0px;
    right: 20px;
    width: 50px;
    border: 1px solid red;
}

#box2{
    position: absolute;
    top: 20px;
    right: 40px;
    width: 100px;
    color: red;
     border: 1px solid blue;
}

#container{
    position: relative; /* parent will be relative*/
    height: 80px;
    border: 1px green solid;
}

#overlay {
    position: absolute;
    bottom: 15px;
    left: 100px;
    background-color: pink;
    opacity: 0.6;
}

p {
    margin-right: 70px;
}