absolute positioning

The box’s position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box’s containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

Using top, right, bottom, and left declarations allows to stretch (or shrink) a box.

Boxes with explicit dimensions do not stretch nor shrink.

In IE6, the yellow box is not painted across the viewport, instead it shrinkwraps around its content.

Style body with:

	position: relative;

Try These

Watch This

aqua
yellow
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).