JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="not-relative">
    <div class="absolute">
        <p>This div is absolutely positioned inside an element which is NOT relatively positioned. See the RED box.</p>
    </div>
</div>

<div class="relative">
    <div class="absolute">
        <p>This div is absolutely positioned inside a relatively positioned element. 200px by 300px. See the BLUE box</p>
    </div>
</div>

<div class="relative-percent">
    <div class="absolute">
        <p>This div is absolutely positioned inside an element which is relatively positioned using percentages. Height 100 percent Width 100 percent. See the green box. </p>
    </div>
</div>

CSS

body { width: 320px; margin: 0 auto;  } 

/* RED BOX */
.not-relative { 
    border: 2px solid red;
    height: 200px;
    width: 300px;
}

/* BLUE BOX */
.relative { 
    border: 2px solid blue;
    height: 200px;
    width: 300px;
    position: relative;
}

/* GREEN BOX */
.relative-percent { 
    width: 100%;
    height: 100%;
    position: relative;
}

/* INNER BOX */
.absolute { 
    height: 200px;
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    background: #e1e2e3;
}

        

/* unrelated - just spacing and the green border */
.relative-percent > div { border: 2px solid green; }   
.not-relative, .relative, relative-percent { margin-bottom: 100px; }

JavaScript

// a bit on absolute/relative positioning