BrainJar.com: CSS Positioning

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.

first float

second float

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

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.

first float

second float

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.

content content content content content content

content content

In the illustration above, the containing block would be the shaded area encompassing the first and last line boxes.

Due to the inconsistencies noted previously in how browsers handle relatively positioned elements, nesting absolute elements inside relative elements may also cause unexpected results and be worth avoiding.

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.