Understanding Absolute vs. Relative Positioning

This layout has been intentionally messed up by changing the position declaration to relative, rather than absolute. If you understand why we get the cascading effect, you will be a long way towards understanding how to control this.

To go back to main example, click here

For a thorough explanation of the CSS positioning concepts, check out this: http://www.quirksmode.org/css/position.html

This block would normally have started at the left margin (i.e. below the black box). But the left: 200px statement shifts it over here.

This block would have started at the left margin as well....

and so on....

Still centered, but vertically is being pushed down by the red box.

This is absolutely positioned relative to the <body> tag.