CSS Positioning

position:relative

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 {
    position:relative;
    top:20px;
    left:-40px;
}

position:absolute

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

position:fixed

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.