HTML and CSS Reference
In-Depth Information
Figure 4-59
Relative positioning
red box is moved
275 pixels to the
right and 50 pixels
down fro
m
its
default lo
c
ation
paragraph retains
its position in the
document flow
Also note that the sample paragraph does not flow into the space previously
occupied by the colored boxes. The layout of the rest of the page is unaffected
because the red box and its contents are still part of the normal document flow.
◗
3.
Explore other combinations of absolute and relative positioning to see their effects
on the layout of the demo page.
In many Web page layouts, you might want to absolutely position an object nested
within a container element, but you don't want to move the container itself. In those
cases, you simply can apply the style
position: relative;
to the container element without specifying the top and left coordinates. The browser
assumes a default value of 0 for these missing coordinates and leaves the container in
its default position in the normal document fl ow; however, any absolute positioning
you apply to a nested element still will be applied relative to the top-left corner of the
container element.
You can use this fact to center one object within another. If you know the total widths
and heights of the nested object and its container, the center location of the nested
object corresponds to the following coordinates:
horizontal center =
container object width
-
nested object width
2 2
vertical center =
container object height
-
nested object height
2 2
Note that the widths and heights are determined by calculating the sum of the widths
and heights of the content, padding, and border space of each object. Try this by using
positioning to center the yellow box within the red box.
