HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
6
The paragraph element is positioned and styled according to the rule for the
first
ID selector.
7
The paragraph element is positioned and styled according to the rule for the
sec-
ond
ID selector.
8
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.
EXAMPLE
14.23
<html>
<head>
<title>layers</title>
<style type="text/css">
<!--
