HTML and CSS Reference
ment's box determined by the browser. To shift an element with respect
to its containing flow, set the position property to relative . In this case,
the top, bottom, left , and right properties are used to compute the box
position relative to its normal position in the flow. Subsequent elements
are not affected by this position change and are placed in the flow as
though this element had not been shifted.
Setting the position property to absolute removes the element from the
containing flow, allowing subsequent elements to move up accordingly.
The position of the element is then computed relative to the containing
block, using the top, bottom, left , and right properties. This type of
positioning allows an element to be placed in a fixed position with re-
spect to its containing element but to move as that containing element
Finally, setting the position property to fixed positions an element with
respect to the window or page in which it is displayed. Like absolute po-
sitioning, the element is removed from the containing flow, with other
elements shifting accordingly. The top, bottom, left , and right proper-
ties are used to set the element's position with respect to the contain-
ing window or page. Note that for continuous media (such as a scrolling
browser display), the element is displayed once at the desired position.
For printed media, the element is printed on each page at the desired
position. You might used fixed positioning to place headers and footers
at the top and bottom of the browser window or at the top and bottom
of each printed page.
The top, bottom, left , and right properties each accept a length or per-
centage value. When the position attribute is set to relative , the per-
centage is based on the size of the element's box. When position is set
to absolute or fixed , the percentage is based on the size of the con-
taining element's box. When length values are used, they specify offsets
from the corresponding edge of the element's containing box. For ex-
ample, to position an element such that its bottom is 1 centimeter above
the bottom of the browser window (or each printed page), you would
set the position property to fixed and the bottom property to 1cm .