HTML and CSS Reference
In-Depth Information
100px
Containing block
150px
Positioned element
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.
Note
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
.
Positioned element
top: -500px
Containing block
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.
