HTML and CSS Reference
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
To explore absolute positioning:
1. Use your Web browser to open the demo_positioning.htm file from the
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).
Viewing absolute positioning
flows into the space
by the red box
the red box is taken
out of the document
flow and placed at
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