Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion

Position:Static (Normal Flow)
By default, if you do not specify a position for an element, then it will be positioned according to the page's "normal flow", or where it occurs naturally within the source. It is not necessary to specify that an element be "static", however, there may be times when this is a useful property value.

In normal flow, elements may be "block" or "inline", but not both simultaneously.

Block elements will appear one right on top of another, whereas inline elements will appear right beside each other. Some examples of block elements are divs, paragraphs and headings. Some examples of inline elements are text, links, and images. This is important to remember, particularly if you start beating your head into the wall because you can't make headings appear smoothly in the middle of some text.

Position:Relative
An element will first be positioned according to it's normal flow, then offset "relative" to it's normal position. So if it was positioned top:5px and left:5px , it would be offset 5 pixels from the top and left of it's original position.

Relative positioning has no effect on other elements, meaning they will be positioned as if the relatively positioned element had not been offset.

Position:Absolute
An element will be positioned "absolutely" but "relative" to it's containing block.

Therefore, if it has no containing block (i.e.: it's container block is the page itself) then it will be positioned absolutely within the page. But if it has a container block (i.e.: is inside another element) then it will be positioned absolutely within that "parent" element.

So, let's say that the element has no containing block, and it was positioned top:5px and left:5px, it would move 5px to the right of the left side of the page, and 5px down from the top of the page.

But, if the element has a containing block, then with those same measurements it would move 5px down from the top of it's container and 5px to the right of the left side of the container. Although this sounds almost the same as relative positioning, it is not, and can be very useful property if used correctly.

Absolute positioning has no effect on elements occurring after it.

Floats
A float is what it sounds like: the element will float, either on the left or right on the current line. Content will flow around the floated element unless you tell it not to, by assigning it a clear property. Floats are removed form document flow, meaning that other elements will position themselves as if the floated element did not exist.

Clear has three values: left, right and both.

Floated elements must be given a width, unless the element contains something that has the width defined, like an image or textarea.

Mary
Mary is an active member of the Christian-Web-Masters.Com forums. You can find her there to bug her about anything. Alternately, you can visit her website, and check out some other tutorials and free goodies.