HTML and CSS Reference
2. For nonroot elements, if an element's position value is relative or static , its con-
taining block is formed by the content edge of the nearest block-level, table-, cell-, or in-
line-block ancestor box. Despite this rule, relatively positioned elements are still simply
offset, not positioned with respect to the containing block described here, and statically
positioned elements do not move from their place in the normal flow.
3. For nonroot elements that have a position value of absolute , the containing block is set
to the nearest ancestor (of any kind) that has a position value other than static . This
happens as follows:
a. If the ancestor is block-level, the containing block is that element's outer padding
edge; in other words, it is the area bounded by the element's border.
b. If the ancestor is inline-level, the containing block is set to the content edge of the an-
cestor. In left-to-right languages, the top and left of the containing block are the top
and left content edges of the first box in the ancestor, and the bottom and right edges
are the bottom and right content edges of the last box. In right-to-left languages, the
right edge of the containing block corresponds to the right content edge of the first
box, and the left is taken from the last box. The top and bottom are the same.
c. If there are no ancestors as described in 3a and 3b, the absolutely positioned element's
containing block is defined to be the initial containing block.
Layout of Absolutely Positioned Elements
In the following sections, these terms are used:
Similar to calculating the width of a table cell using the automatic table layout algorithm.
In general, the user agent attempts to find the minimum element width that will contain
the content and wrap to multiple lines only if wrapping cannot be avoided.
The place where an element's edge would have been placed if its position were static .
Horizontal layout of absolutely positioned elements
The equation that governs the layout of these elements is:
left + margin-left + border-left-width + padding-left +
width + padding-right + border-right-width +
margin-right + right + vertical scrollbar width (if any) =
width of containing block