In the various chapters within this section, you have seen how dynamic documents can be when formatted with CSS. This chapter shows you how you can position elements using CSS properties.
Understanding Element Positioning
There are several ways to position elements using CSS. The method you use depends on what you want the position of the element to be in reference to and how you want the element to affect other elements around it. The following sections cover the three main positioning models.
Static positioning is the normal positioning model—elements are rendered inline or within their respective blocks. Figure shows three paragraphs; the middle paragraph has the following styles applied to it:
Note:Several styles have been inserted for consistency throughout the examples in this section. A border and background have been added to the element to enhance the visibility of the element’s scope and position. The element also has two positioning properties (top and left), although they do not affect the static positioning model.
Static positioning is the normal positioning model, rendering elements where they should naturally be.
Relative positioning is used to move an element from its normal position—where it would normally be rendered—to a new position. The new position is relative to the normal position of the element.
Figure shows the second paragraph positioned using the relative positional model. The paragraph is positioned using the following styles (pay particular attention to the last two, position and top):
Relative positioned elements are positioned relative to the position they vwould otherwise occupy.
With relative positioning, you can use the side positioning properties (top, left, and so on) to position the element. Note the one major side effect of using relative positioning—the space where the element would normally be positioned is left open, as though the element were positioned there.
Note: The size of the element is determined by the sizing properties (width or height), the positioning of the element’s corners (via top, left, and so on), or by a combination of properties.
Elements using absolute positioning are positioned relative to the view port instead of their normal position in the document. For example, the following styles are used to position the second paragraph in Figure:
The absolute positioning model uses the user agent’s view port for positioning reference.
Note that the positioning properties are referenced against the view port when using the absolute positioning model —the element in this example is positioned 100px from the top and 100px from the left of the view port edges. Unlike the relative positioning model, absolute positioning does not leave space where the element would have otherwise been positioned. Neighboring elements position themselves as though the element were not present in the rendering stream.
Fixed positioning is similar to relative positioning in that the element is positioned relative to the view port. However, fixed positioning causes the element to be fixed in the view port—it will not scroll when the document is scrolled; it maintains its position. The following code is used to position the second paragraph shown in Figures: