HTML and CSS Reference
In-Depth Information
Figure 4-58
Absolute positioning for a nested object within a static container
yellow box is placed
at the coord
inates
(90, 75) within the
browser window
red box is
n
o
longer positioned
on the page
◗
4.
Continue experimenting with the demo page by entering values for the top and
left coordinates and observing the effect on the placement of the boxes.
Next, you'll examine how to place objects using relative positioning.
Relative Positioning
Relative positioning
is used to move an element relative to where the browser would
have placed it if no positioning had been applied. For example, the style
position: relative;
left: 100px;
top: 50px
places an element 100 pixels to the right and 50 pixels down from its normal placement
in a browser window. A relatively positioned object is still part of the normal document
fl ow; its placement is simply adjusted from its default location. You'll return to the demo
page to explore the impact and uses of relative positioning.
To explore relative positioning:
◗
1.
Click the
reset
button within the demo page to return both boxes to their default
locations in the Web page.
◗
2.
Select
relative
from the list box for the outer element, and then enter
275
for the
left value and
50
for the top value. As shown in Figure 4-59, the outer box moves
275 pixels to the right and 50 pixels down from its default location.
