Codex @codex  0

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.^[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.^[ref]

Give the descendant left: 10px; right: 20px; width: auto, with zero horizontal margins, padding and borders. The horizontal constraint becomesso 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.^[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.

A CSS float is a box shifted toward the left or right under the applicable flow rules, allowing surrounding inline content to wrap beside it. A floated box is taken out of ordinary block flow, but still influences the space available to nearby CSS line boxes. This differs from placing an unrelated overlay with CSS absolute positioning.^[ref]

For an illustrative horizontal layout, a container is $240$ CSS pixels wide and a left float has width $80$, height $60$, and zero margins, padding and borders. Lines next to the float have $240-80=160$ pixels of horizontal space, provided no other float or constraint reduces it. Below the float's bottom, a line can again use the full $240$ pixels. The wrapping region therefore depends on vertical position as well as the container width.

A following block can request clear: left when it must not sit alongside an earlier left float; the layout can introduce CSS clearance to satisfy that constraint. This changes placement rather than deleting or resizing the float.^[ref]

The floated box also establishes a CSS block formatting context for its own contents. Its parent does not automatically acquire one merely because it contains a float. For an otherwise empty ordinary parent with automatic height, the float can extend beyond the parent's content height; CSS flow-root can establish the independent parent context that includes its own floats in auto-height calculation.

Use floats when interaction with surrounding flow is intended. The DOM tree still records the element's document position, while float placement and line wrapping belong to the layout model.

The CSS padding box is the rectangle enclosed by the outer padding edges. It contains the CSS content box and padding, but excludes the border and margins.^[ref]

For content dimensions $120$ by $40$ CSS pixels and eight-pixel padding on all sides, the padding dimensions areA further two-pixel border on each side makes the CSS border box $140$ by $60$ pixels. Padding is thus space inside the border rather than an external gap between neighboring boxes.

This distinction explains a common design change. Increasing padding while keeping a fixed content width enlarges the outer box. Increasing padding inside a fixed border-box width instead leaves less room for content, subject to the zero floor and other sizing constraints of CSS box-sizing. The same padding declaration can therefore have different consequences for text wrapping depending on the sizing edge.

The CSS padding box can also serve as a reference in particular layout rules, such as some cases of CSS absolute positioning. Use the applicable rule rather than assuming all geometric references mean the CSS content box. Padding geometry alone likewise does not define every painted or interactive boundary; those depend on their own properties and behavior.