HTML and CSS Reference
EXPLANATION ( CONTINUED )
The paragraph element is positioned and styled according to the rule for the first
The paragraph element is positioned and styled according to the rule for the sec-
ond ID selector.
The paragraph element is positioned and styled according to the rule for the third
ID selector. See Figure 14.24.
Figure 14.24 Three layers based on absolute positioning (Internet Explorer 8, Firefox).
Top , Left , Bottom , Right —Absolute Positions. As shown in Example 14.22, once
the position has been set, the left , top , right , and bottom attributes can be used to specify
exactly where on the page the element should be located. Although we used left and top
to define the position of the element within the body of the document, right and left bot-
tom can also position the element on the page. In the following example, four elements
are placed in different fixed positions in the document. If you change the size of the win-
dow, the boxes will appear to be located in different places than shown in the output of
this example, Figure 14.25. That is because the fixed positions are relative to the dimen-
sions of the document's window. For example, if you shrink the window horizontally,
and the boxes are positioned 10 pixels from the bottom, they are still 10 pixels from the
bottom of the document, and the boxes at the top are still 10 pixels from the top, giving
the appearance that they have moved much closer together. If the window is shrunk
enough either vertically or horizontally, the boxes might even overlap to maintain their
absolute positions, as shown in Figure 14.26.