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.
The reference container is the root element. This initial containing block has the dimensions of the viewport. Hence the yellow box is positioned at the bottom of the viewport and not at the bottom of the document as it would be the case if body was styled with position:relative.
Absolutely positioned boxes scrolls with the document. Browsers display scrollbars if part of their region is out of the viewport (positif offset).
In IE6 and 7 the default value (auto) for left is assumed to be the left coordinate (x) of the box as if it was static. Because of this bug, it is a good idea to always declare a left value.
In a rtl context, Gecko browsers may misplace elements that are positioned to the right side of the viewport (negatif offset).
Style the yellow box with:
bottom: 50%;Style the yellow box with:
top: 50%;