Positioning with Style Sheets 419CSSPositioning with Style SheetsWeb Design in a Nutshell, eMatter EditionFor complete positioning information, see the W3C’s CSS2 specification online at
http://www.w3.org/TR/REC-CSS2. A good overview is provided by Eric Meyer in his
article, “Playing for Position,” in WebReview magazine (http://webreview.com/wr/
pub/98/02/06/ feature/index3.html).
The position Property
Thepositionproperty has three possible values:absolute,relative, and
static.
It works in conjunction with thetopandleftproperties (used for specifying
distances from the top and left starting point), and with thewidthandheight
properties (for specifying the width and height of the element including its
padding and border). Values for these properties can be specified as either length
units or percentages.
Relative positioning
Relative positioning places the element relative to its initial position in the flow.
Once the element is moved, the space it previously occupied is held blank. The
resulting position may cause the element to overlap other elements on the page.
Measurements are relative to the top-left point of the element box. Adding a posi-
tive top value moves the element down the specified amount from its initial top
position. Adding a positive value for the left property moves the element that
amount to the right. You can also specify negative values to move an element up
and to the left. In Figure 23-4 and the following code, the emphasized text is
moved 20 pixels down and 12 pixels to the right of its initial position.
<HEAD>
<STYLE TYPE="text/css">
<!--
EM { position: relative; top: 20px; left: 12px; }
-->
</STYLE>
</HEAD><BODY>
<P>This line contains some <EM>emphasized</EM> text that will
be repositioned.</P>
<P>This is some more text that follows the line with emphasized
text.</P>
</BODY>Figure 23-4: Word moved down and to right with relative positioning