JSFiddle - React, Tailwind, and code Playground

HTML

<section class="parent static">
    <div class="child absolute">
        <p>absolute</p>
    </div>
    <p>static</p>
</section>

<hr>

<section class="parent static">
    <div class="child static">
        <p>static</p>
    </div>
    <p>static</p>
</section>

<hr>
    
<section class="parent static">
    <div class="child relative">
        <p>relative</p>
    </div>
    <p>static</p>
</section>
    
<hr>
    
<section class="parent relative">
    <div class="child absolute">
        <p>absolute</p>
    </div>
    <p>relative</p>
</section>
    
<hr>

CSS

.static {
    position: static;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;    
}

.sticky {
    position: sticky;
}

.page {
    position: page;
}

.child {
    top: 30px;
    left: 20px;
    
    background-color: #ff3856;
    width: 100px;
    height: 100px;
}

.parent {
    
    background-color: #6acc18;
    margin: 80px;
    width: 160px;
    height: 160px;
}