DM 171: CSS Positioning

Assume the Position!

Here are the four basic values of the position property and some caveats for each.

Static

Static positioning is the default of HTML/CSS. Elements flow one after the other following their order in the HTML file. One of the other three positioning values is needed to move elements from their static placement. View an HTML page, with static or default positioning, that will be used to illustrate positioning values.

Relative

Relative positioning moves the element relative to its static position but leave the same space in the page flow as if the element was unmoved. This can lead to overlap of elements, use the z-index CSS property to control which element is on top of the other. See some relatively positioned text.

Absolute

Absolute positioning totally removes the element from the natural position on the page; the rest of the content flows in to replace it. Go to an example of absolutely positioned text. Content overlap is almost guaranteed unless you account for its effect. Absolutely positioned elements are treated as “layers” in Dreamweaver's design view. Very interesting…

Fixed

Fixed positioning removes the element from its static position on the page, the rest of the content flows in to replace it. Fixed also locks the element in place; other content scrolls past it. See an example here.

Fixed positioning is relative to the browser window regardless of parent containers. Vexingly, fixed positioning is not supported by Internet Explorer. There is a workaround here:
http://tagsoup.com/cookbook/css/fixed/

Position Context Matters

The examples above use simple files with no container divs. Default or statically positioned elements will follow their natural flow. Relatively positioned element are positioned relative to their parent container. Absolutely positioned elements are positioned relative to the body (browser window) unless their parent container is relatively or absolutely (and moved from its static placement) positioned. Fixed elements are always relative to the body.

Whew…

View an example with a containing div that has relative positioning and one that has default positioning.

The Upshot

Use static positioning whenever possible, use the other positioning values sparingly with care.