HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
#static-position-box {
}
An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled (checkout the upper right corner).
#fixed-position-box {
position:fixed;
top:20px;
right:20px
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified. (Why will you use that?)
A relative positioned element is positioned relative to its normal position.
#relative-position-box {
position:relative;
top:20px;
left:20px
}
#relative-position-box {
position:relative;
top:20px;
left:20px
}
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow:
#relative-position-box {
position:relative;
top:20px;
left:20px
}
One last thing. Relatively positioned elements are often used as container blocks for absolutely positioned elements. Carry on to the next section.
An absolute position element is positioned relative to the first parent element that has a position other than static (relative, fixed and other absolutes).
#absolute-position-box-1 {
position:absolute;
top:20px;
left:20px
}
#absolute-position-box-3 {
position:absolute;
bottom:20px;
right:20px
}
#absolute-position-box-2 {
position:absolute;
bottom:10px;
right:10px
}
If no element is found, the containing block is the html node. In this case think of position:static but being scroll sensible. (scroll to the beginning of this page and checkout the upper right corner).
Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.
#absolute-position-box {
position:absolute;
top:160px;
right:20px
}
When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order:
#absolute-position-box-1 {
position:absolute;
bottom:20px;
left:20px
}
#absolute-position-box-2{
position:absolute;
bottom:40px;
left:40px
}
#absolute-position-box-3 {
position:absolute;
bottom:20px;
left:20px
z-index:999;
}
#absolute-position-box-4{
position:absolute;
bottom:40px;
left:40px
}
Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.
This isn't functional programming or compiler theory, so just get used to the notation.
[1] CSS Positioning at W3C (almost all the text here came from that article)