= CSS absolute positioning
{c}
<CSS absolute positioning> positions a generated box with respect to its <CSS containing block>, removing it from the ordinary flow that places its siblings. The declaration `position: absolute` selects this positioning scheme; offsets and size rules then determine its geometry. Its siblings do not reserve the space that it would otherwise have occupied.<Visual formatting model in CSS 2.2 by W3C>[§9.6, Absolute positioning]{ref}
A simple example uses a positioned block ancestor with content width $300$ <CSS pixels>, twenty-pixel padding on both sides and content-box sizing. In the ordinary CSS2.2 case, this ancestor's padding edges establish a $340$-pixel-wide <CSS containing block> for an absolutely positioned descendant, provided no nearer qualifying ancestor intervenes.<Visual formatting model details in CSS 2.2 by W3C>[§10.1, absolutely positioned containing blocks]{ref}
Give the descendant `left: 10px; right: 20px; width: auto`, with zero horizontal margins, padding and borders. The horizontal constraint becomes
$$
10+w+20=340,
$$
so its used content width is $310$ pixels. Alternatively, `width: 50%; left: 10px; right: auto` gives a width of $170$ pixels under the same assumptions. Offsets and percentages therefore refer to the selected containing geometry, not automatically to the ancestor's content width.<Visual formatting model details in CSS 2.2 by W3C>[§10.3.7, absolute non-replaced width equation and auto cases]{ref}
Absolute positioning does not remove the <DOM element> from the <DOM tree>; it changes layout participation. It can allow boxes to overlap, but does not by itself specify clipping, permanent attachment to a screen position or every painting-order relationship. Use <CSS overflow> and the applicable positioning rules when diagnosing those separate effects.
Back to article page
