HTML and CSS Reference
Figure 11-1. The offsets of a positioned element are calculated from the sides of its containing block
In this example, the top of the positioned element is 100px below the top of the containing block, and the
element's left edge is 150px to the right of the containing block's left side.
If you don't specify an offset or you use the keyword auto , the element occupies the position it normally
would, unless it's prevented from doing so by another offset. For example, if you don't set a value for the left
offset, the left edge of the element is where it would be in the normal flow of the document. But a specific value
for the right offset could move the entire element, shifting the left edge to a different position.
■ Percentage values for top and bottom are relative to the containing block's height. Values for right and
left are relative to the containing block's width. Unlike a background image, setting left to 50% doesn't center a
positioned element. it positions the element's left edge halfway across the containing block.
Don't be confused by the expression “containing block.” It doesn't constrain where the element can be
displayed. In fact, it's quite common to display a positioned element outside its containing block by using
negative offsets. Figure 11-2 shows an example of an element being positioned outside its containing block by
setting top to -500px .
Figure 11-2. Setting a negative offset moves the element out of its containing block
No offset for left is set, so the left edge of the element remains aligned with the left edge of the containing
block—in other words, where it would have been in the normal flow of the document.