A Sample Page for Positioning

This is a sample page so we can start to explore the different types of possitioning options CSS provides. What are the positioning options?

Absolute: taken out of the normal flow of the page and positioned at desired coordinates; the normal document flow behaves as if the element is not there.
Relative: initially has the position the normal flow, but it is offset by the amount the top, bottom, left, and/or right declarations give.; The space the element originally took remains empty.
Static: always has the position the normal flow of the page gives it.; ignores any top, bottom, left, or right declarations.
Fixed: 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.

We will be using this page to demonstrate all of these properties. With out any CSS to break the normal flow notice what happens when you resize the browser. What happens?

For more information on CSS and positioning check out these great tutorials.

This is a extra paragragh below links so you can how positioning effects the normal flow.