<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>
.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; }