HTML and CSS Reference
In-Depth Information
EXAMPLE
14.22 (
CONTINUED
)
4
#third
{
background-color: orange;
border-style: solid;
font-weight:bold;
top: 40 ;
position: absolute;
left: 100;
height: 100;
width: 100;
}
</style>
5
<body>
6
<p id="first">
First position
</p>
7
<p id="second">
Second position
</p>
8
<p id="third">
Third 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 20 pixels from the top of the window, 20 pixels from the left
side, and have a size of 100 × 100 pixels (width × height).
2
The
position
attribute is specified as absolute. It is independent of all other ele-
ments in the body of this document.
3
An ID selector called
#second
sets the pixel positions for a blue block that will be
absolutely positioned 30 pixels from the top of the window, 60 pixels from the left
side, and have a size of 100 × 100 pixels (width × height). The blue box will ap-
pear to be layered over the red one.
4
An ID selector called
#third
sets the pixel positions for an orange block that will
be absolutely positioned 40 pixels from the top of the window, 100 pixels from
the left side, and have a size of 100 × 100 pixels (width × height). The orange box
will appear to be layered over the blue one.
5
The
<body>
serves as the container for three objects. The red, blue, and orange
boxes will appear in the window at the absolute positions assigned to them in re-
lationship to their container, the body of the document.
Continues
