HTML and CSS Reference
In-Depth Information
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
moves.
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
.
