HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 8.16
Two floating ele-
ments that are
aligned vertically.
If using
float
to control how elements are laid out doesn't provide the measure of con-
trol you're looking for, you can use the CSS positioning attributes. To position elements
yourself, you first have to choose a positioning scheme with the
position
property.
There are four positioning schemes, three of which you'll actually use. The four are
sta-
tic
,
relative
,
absolute
, and
fixed
.
The
static
scheme is the default. Elements flow down the page from left to right and
top to bottom, unless you use the
float
property to change things up. The
relative
scheme positions the element relative to the element that precedes it. You can alter the
page flow to a certain degree, but the elements will still be interdependent. The
absolute
and
fixed
schemes enable you to position elements in any location you want on the
page. The
fixed
scheme is not well supported, so if you want to control where items
appear yourself you should use
absolute
.
After you've picked a positioning scheme, you can set the position for elements. There
are four positioning properties:
top
,
left
,
bottom
, and
right
. The values for these prop-
erties are specified as the distance of the named side from the side of the enclosing
block. Here's an example:
.thing {
position: relative;
left: 50px;
top: 50px;
}
In this case, elements in the
thing
class will be shifted 50 pixels down and 50 pixels to
the left from the elements that precede them in the page layout. If I were to change
position
to
absolute
, the element would appear 50 pixels from the top-left corner of
the page's body.
