Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

18.2. Specifying an Element's Position

The top, right, bottom, and left CSS properties can be used to position an element. The effect that these properties have on the actual position of the element largely depends on the positioning method being used (positioning methods were covered in the previous section).

The side positioning properties all have the following syntax:

side: <length> | <percentage>;

The specified side of the element (top, right, bottom, or top) is the side used to position the element. The element's other properties (size, borders, and so on) determine the position of the sides not explicitly positioned. The positioning method being employed also plays a role in the actual position of the element (see the previous section).

For absolutely positioned elements, the side values are related to the element's containing block. For relatively positioned elements, the side values are related to the outer edges of the element itself.

For example, the following styles result in positioning an element 50 pixels down from its normal position in the document flow:

p.fiftypxdown { position: relative;
             top: 50px; }

Using percentages causes the user agent to position an element according to a percentage of its size (or its bounding-box size). For example, to move an element left by 50% of its width, the following style can be used, whose result is shown in Figure 18-9:

p.fiftypercentleft { border: 1pt solid black; background-color: white; position: relative; right: 50%; } ...