CSS Element Positioning

Key points:

• For "static" and "relative", elements are positioned according to natural document flow. "relative" offers some positional control, but both take up space on the page. "relative" is often used as containing blocks for elements positioned with e.g. "absolute".
• "absolute" positioning is relative to containing block e.g. a parent element with "position: relative". If no parent containing block is present it'll be relative to the document.
• "fixed" positioning is relative to the current browser viewport.
• "fixed" and "absolute" both take up no space in the natural document flow. It's like a separate layer.

References:

• http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx
• http://www.quirksmode.org/css/position.html
• http://www.w3schools.com/cssref/pr_class_position.asp