JSFiddle - React, Tailwind, and code Playground

by Niranjan Borawake

HTML

<h2>CSS "position" property explained</h2>

<b>Relative Positioning:</b>
<p>#2 is positioned relatively 150px from the left of its normal position.</p>
    
<div class="decorate static">1 </div>
<div class="decorate relative">2 </div>
<div class="decorate static">3 </div>
<br>
    
<b>Fixed Positioning:</b>
<p>#4 is fixed (positioned) to the top-right. It will not move even if you scroll.</p>
<div class="decorate fixed">4 </div>
<br>
    
<b>Absolute Positioning:</b>
<p>#6 is positioned absolutely 150px from left but relative (w.r.t.) to #5.</p>
<div class="decorate relative">5
    <div class="decorate absolute">6 </div>
</div>
<br><br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">More Details</a>

CSS

.static {
    position : static;
}
.relative {
    position : relative;
    left : 150px;
}
.fixed {
    position : fixed;
    right : 0;
    top : 0;
    height : 105px !important;
}
.absolute {
    position : absolute;
    left : 150px;
    top : 35px;
    width : 300px !important;
}
.decorate {
    width:150px;
    height:35px;
    background-color : black;
    color : white;
    text-align : left;
    font-size:30px;
    text-indent:10px;
}
.relative::after {
    content:"I am relative";
    color : orange;
    font-size:20px;
}
.static::after {
    content:"I am static";
    color : orange;
    font-size:20px;
}
.fixed::after {
    content:"I am fixed ...... I'll not move even if you scroll.";
    color : orange;
    font-size:20px;
}
.absolute::after {
    content:"I am absolute (but relative to 5)";
    color : orange;
    font-size:20px;
}