HTML and CSS Reference
In-Depth Information
placement of other objects in the Web page. To explore how absolute positioning affects
page layout, you'll use a demo that explores the effect of different positioning options on
page design.
To explore absolute positioning:
◗
1.
Use your Web browser to open the
demo_positioning.htm
file from the
tutorial.04\demo folder.
The demo page contains two colored boxes that you can move by changing the
values in two sets of list boxes. The boxes are initially set to their default position,
which is within the flow of the other elements in the page. To make it easier to
place the boxes at specific positions, a grid marked in pixels has been added to
the page background.
◗
2.
Select
absolute
from the list box for the outer box, and then press the
Tab
key.
◗
3.
Enter
275
in the left box, and then press the
Tab
key. Enter
350
in the top box,
and then press the
Tab
key again. As shown in Figure 4-56, the red outer box is
placed at the page coordinates (275, 350).
Figure 4-56
Viewing absolute positioning
sample paragraph
flows into the space
previously
occupied
by the red
box
the red box is taken
out of the document
flow and placed at
the coordinates
(275, 350)
Absolute positioning takes an element out of the normal document fl ow, so that any
subsequent content fl ows into the space previously occupied by the element. Note that
on the demo page, the sample paragraph moves up into the space that was previously
occupied by the red outer box.
The location of the object depends on the context in which absolute positioning has
been applied. If the object is contained within another object that has been placed using
the
position
property, then those two objects are placed as a single unit and the nested
object's coordinates are based on the position of the containing object. On the other
