<b>Absolute Positioning:</b> <p>#6 is positioned absolutely 150px from left but relative (w.r.t.) to #5.</p> <div id="id5" class="decorate relative">5 <span>I am relative</span> <div class="decorate absolute">6 </div> <div class="decorate static">7 </div> </div>
.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 { color : orange; font-size:20px; } .static::after { content:"I am static"; color : orange; font-size:20px; } span{ 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; }