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

18.1. Understanding Positioning Methods

Several element-positioning methods are available via CSS. Which method you choose depends on how you want an element's position to be affected by other elements and changes the user makes to the user agent view port (resizing the view port, moving the view port window, and so on). The positioning model an element uses can be specified using the position property. This property has the following syntax:

position:  static | relative | absolute | fixed;

The following sections detail the various positioning methods (static, relative, absolute, and fixed) available via the position property.

Not all user agents support all positioning models. If you choose to use a positioning method, you should test your code on all platforms you wish to support.

18.1.1. Static Positioning

Static positioning is the default positioning model used if no other method is specified. This method causes elements to be rendered within their in-line or other containing block, placed in the document as the user agent would normally flow them. The three paragraphs shown in Figure 18-1 are all positioned statically, though the second paragraph has its positioning model explicitly defined with the following style:

p.static { width: 400px; height: 200px;
           border: 1pt solid black;
           position: static;
}

Figure 18-1. Figure 18-1

Several styles have been added to the demonstration ...