Ben Henick

CSS positioning demonstration

c. Jan 2007

When you assign a position value other than static (the default) to a block element, the origin of the positioning context of that element's children is changed to the top-left corner of the element in question.

When combined with application of the bottom and right attributes (in addition to top and left, the results can be impressive.

Element with layout and positioned child

The quick red fox jumps over the lazy brown dog.

Post your comments here

Element without layout and with positioned child

The quick red fox jumps over the lazy brown dog.

Post your comments here

Results

As you can see from the styles (which are inline to the header of the page and tested in FF2.0.1 and IE7 on WnXP/SP2), the use of absolute positioning within a relatively positioned container offers some pretty powerful layout tools.