HTML and CSS Reference
In-Depth Information
Two floating ele-
ments that are
aligned vertically.
CSS Positioning
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.
Search WWH ::

Custom Search