CSS Positioning
Review the W3C CSS standard recommendation.The illustration below shows the effect of placing two right-floated elements next to each other. Note how the first floated element appears farthest to the right.
The clear
property can be used on a floated element to force
it below adjacent floats (recall that floated elements are treated as
block-level elements for positioning). Just remember that vertical margins are
not collapsed for floated boxes. Here's an illustration of the same code but
with clear:right
set for the second floated element.
Absolute Positioning
This positioning scheme applies to any element that has its
position
property set to absolute
or
fixed.
Such boxes are removed from the normal flow and have no effect on boxes in that flow. Like floated elements, absolutely positioned elements are always treated as block-level elements. As such, they establish a new containing block for any descendants, i.e., any elements contained within the absolutely positioned element.
The position of an absolutely positioned element is determined by its
offset values: top, right, bottom
and left.
These
values work in much the same way as with relatively positioned elements.
But unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is offset from its container block.
Container Block for Absolutely Positioned Elements
The containing block of an absolutely positioned element is defined a little
differently than it is for other elements. The containing block for an
absolutely positioned element is established by its closest, positioned
ancestor. That is, the nearest element outside it that has a
position
of absolute, relative
or fixed.
If there is no such ancestor element, the initial containing block (the browser
window) is used.
Recall that non-absolutely positioned elements used the containing block of their closest, block-level ancestor. But for absolute elements the containing element can be an inline element.
Additionally, if that containing element is a block-level element, the padding edge of that element forms the container block, not the content edge. In other words, the offsets are measured from just inside the border of the containing element.
If the containing element is an inline-level element, it gets a little more complicated. Since an inline element may generate several line boxes, the container box is defined as the area bordered by the top and left content edges of the first box within that element and the bottom and right content edges of the last box it contains.
For example, consider a relatively positioned SPAN that contains text taking up two lines, some of which is bolded.
In the illustration above, the containing block would be the shaded area encompassing the first and last line boxes.
Note that while margins are honored with absolutely positioned elements (position offsets are measured from the margin edge of the element's box) they are otherwise meaningless since absolutely positioned elements do not participate in the normal flow.