CSS Positioning


If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

#div-1 {


When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.

Sizing Without Width or Height

Here’s a bonus tip that probably not a lot of people know about. You can actually define the dimensions of any absolutely positioned element using the top, left, bottom, and right values alone, without any content in the element and without width or height values.

.box {
    position: relative; 
    width: 400px;  
    height: 400px;  

.inner-box {  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;     
    bottom: 0;  


An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.

Learning Resources

Learn CSS Positioning in Ten Steps article.

Post A Comment

Anti-Spam Quiz: