HTML and CSS Reference
In-Depth Information
EXAMPLE
14.23 (
CONTINUED
)
7
<p id="second">
Second position
</p>
8
<p id="third">
Third position
</p>
9
<p id="fourth">
Fourth position
</p>
</body>
</html>
EXPLANATION
1
An ID selector called
#first
sets the pixel positions for a red block that will be ab-
solutely positioned 10 pixels from the top of the current window, 100 pixels from
the right side, and have a size of 100 × 100 pixels (width × height).
2
An ID selector called
#second
sets the pixel positions for a blue block that will be
absolutely positioned 10 pixels from the top of the window, 400 pixels from the
left side, and have a size of 100 × 100 pixels (width × height).
3
An ID selector called
#third
sets the pixel positions for an orange block that will
be absolutely positioned 10 pixels from the top of the window, 200 pixels from
the left side, and have a size of 100 × 100 pixels (width × height).
4
An ID selector called
#fourth
sets the pixel positions for a yellow block that will
be absolutely positioned 10 pixels from the bottom of the window, 40 pixels from
the right side, and have a size of 100 × 100 pixels (width × height).
5
The body is called the container for the elements within it. The red, blue, orange,
and yellow boxes will appear in the window at the absolute positions assigned to
them in relationship to their container, the body of the document. If you change
the size of the window, the boxes are fixed to the absolute positions, making it
seem as though the boxes have moved. They are aligned to the fixed pixel posi-
tions from the top, bottom, right, and left sides of the current sized window.
6
The paragraph element is positioned and styled according to the rule for the
first
ID selector, the top, right corner.
7
The paragraph element is positioned and styled according to the rule for the
sec-
ond
ID selector, the left, bottom corner.
8
The paragraph element is positioned and styled according to the rule for the
third
ID selector, the top, left corner.
9
The paragraph element is positioned and styled according to the rule for the
fourth
ID selector, the bottom right corner. See Figure 14.26.
