ptg16476052Absolute Positioning 29311
positioned relative to its natural location in the page layout. There is enough space left in
the original layout to contain all of the relatively positioned content.
Absolute Positioning...........................................................................................
Now let’s look at absolute positioning. As mentioned previously, when an element is
absolutely positioned it is removed from the normal flow entirely. However, the default
coordinates of an absolutely positioned element are its position in the normal flow. So if
you specify an alternate position, its position in the normal flow will not be reserved. If
you do not, it will appear in the normal flow exactly as an element that is not positioned
would. Before going further, I should describe the positioning properties in more detail.
Positioning Properties
As you’ve seen, there are four properties that can be used to specify the position of a
positioned element: top, right, bottom, and left. All the positioning properties have
slightly different meanings depending on the positioning scheme.
In the absolute positioning scheme, the top property specifies the distance between the
top margin of the positioned element and the top inside border of its containing block.
This means that while the margin and border of the containing block do affect the posi-
tion of the absolutely positioned element, the block’s padding does not.
In the relative positioning scheme, the top property specifies where the top margin of the
positioned element should appear relative to its predecessor in the normal flow, or from
the top edge of its containing block if it’s the first element in that block. So if you set a
top position of 100px, it will be moved 100 pixels down from its position in the normal
flow. The key difference in positioning relative and absolute is that for absolutely
positioned elements, the positioning is always in reference to the edges of the containing
block. For relative elements, the positioning refers to adjacent elements in the normal
flow if they exist.
The bottom property is exactly like the top property except that it refers to the bottom
margin of the positioned element. So in the absolute scheme, it specifies the distance
from the inner edge of the bottom border of the containing block. In the relative
scheme, it relates to the following element in the normal flow. A positive value moves
the element up the page, and a negative value moves the element down the page.
The left and right properties are similar as well. In absolute positioning schemes, posi-
tive values of the left property move elements to the right, and positive values of the
right property move elements to the left. They work the same in relative schemes as
well, moving elements to the left or the right relative to the adjacent blocks in the normal