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 block formatting context is a formatting context in which block-level boxes participate in block layout and interact with relevant CSS floats. A box establishing a new context gives its contents an independent layout context. This is distinct from simply being a CSS block container or an ordinary block-level box.^[ref]

CSS flow-root, selected by display: flow-root, explicitly creates a block container establishing a new CSS block formatting context. An ordinary CSS inline-block box similarly combines an inline outer role with an independent flow context for its contents.^[ref]

A useful controlled layout experiment gives a parent width: 200px; height: auto; margin: 0; padding: 0; border: 0 and only one child, with float: left; width: 80px; height: 60px; margin: 0. With no other content or constraints, compare ordinary display: block with display: flow-root on the parent. The ordinary parent's content height is zero in this setup; the context-establishing parent's content height includes the sixty-pixel float. The child remains floated in both cases. This is a predicted result of the stated layout rules, rather than a browser timing measurement.^[ref][ref]

Margins do not collapse across the context boundary, but eligible margins of sibling blocks inside it can still collapse. For example, adjoining internal bottom/top margins of twenty and thirty CSS pixels can still give a thirty-pixel separation. Establishing a context is therefore not a universal switch disabling CSS margin collapsing.^[ref][ref]

Finally, CSS flow-root itself does not request clipping or a scrollbar. Treat formatting isolation, CSS containing block geometry and CSS overflow as separate properties of the layout.

A CSS containing block is the reference rectangle used by applicable layout rules to determine a box's size and position. Which ancestor establishes it, and which edges define it, depend on the positioning and layout context. It is therefore not simply another name for the immediate parent DOM element.^[ref][ref]

Consider a horizontal block with position: relative; width: 300px; padding: 20px; border: 5px solid and content-box sizing. Its content width is $300$ and its padding-box width is $340$ CSS pixels. An ordinary block child whose width is 50% uses the applicable $300$-pixel content-width reference, giving $150$ pixels. A child with position: absolute; width: 50% instead uses this positioned ancestor's padding-box reference, giving $170$ pixels. Assume no intervening ancestor establishes another reference, and no child padding, borders or other size constraints.^[ref]

The same percentage text thus produces different numbers because its geometric reference changes. This is useful when debugging an apparently wrong width: first identify the actual CSS containing block, then apply CSS box-sizing and the remaining constraints.

A CSS containing block does not automatically confine all descendant painting. Content may extend beyond it; CSS overflow and clipping rules are separate. A positioning reference, a clipping boundary and a DOM tree parent need not identify the same rectangle or object.

A CSS maximum size is an upper constraint supplied by a maximum-size property such as max-width or max-height. It participates in finding the CSS used value, together with the CSS preferred size, CSS minimum size and applicable layout rules.^[ref]

For a simple block with zero padding and borders, width: 500px; max-width: 400px; min-width: 240px gives a used width of $400$ CSS pixels. With the same constraints but preferred width $180$, the used width is $240$. Once these fixed dimensions are resolved, this simplified calculation iswhere $p$ is the tentative width, $m$ the minimum and $M$ the maximum. It expresses the order of limiting the tentative width and then enforcing the minimum in this case.^[ref]

If the minimum exceeds the maximum, the minimum wins: min-width: 320px; max-width: 200px does not squeeze the box below its $320$-pixel minimum. Also check CSS box-sizing before interpreting which edge the numbers measure.

A maximum constraint limits the box's size; it does not guarantee that every unbroken descendant fits or specify clipping. Such content may cause CSS overflow. Percentage constraints likewise require the appropriate CSS containing block and a usable dimension reference. These qualifications make max-width: 100% a sizing instruction rather than a universal promise that nothing can extend outside a container.

A CSS preferred size is a size requested by a preferred-size property such as width or height. The final layout also depends on the applicable sizing algorithm, the CSS containing block and any CSS minimum size or CSS maximum size. Preferred therefore identifies an input to sizing, not an unconditional measurement of the final box.^[ref]

For a simple content-box block with no padding or borders, consider width: 300px; max-width: 100% in a 200-CSS pixel containing block. The maximum constraint limits the used width to 200 pixels. With a sufficiently wide containing block, the same preferred width can instead yield 300 pixels. The example assumes no other minimum constraint.

Values such as auto, percentages and content-based sizing keywords have context-dependent meanings. A percentage can depend on whether the relevant containing dimension is definite, and auto sizing can use different rules for ordinary blocks and CSS replaced elements. The word auto is not a universal synonym for one numeric width.

The properties also have applicability limits. A non-replaced inline box is not made into a fixed-size rectangle merely by assigning width and height. Relating a CSS preferred size to a CSS used value requires identifying the box kind and the layout rules that resolve its constraints.

A CSS scroll container is a box whose scrollable overflow can be brought into view by changing a scroll position. Its viewing region is the CSS scrollport, normally coinciding with its padding box. The extent of the scrollable contents can be larger than that viewing region.^[ref]

Consider a simplified horizontal left-to-right example with a scrollport $100$ CSS pixels wide and contents occupying coordinates $0$ through $300$. At scroll position zero, the visible interval is $[0,100]$. At position $200$, it is $[200,300]$. In this stipulated geometry the maximum displacement is $300-100=200$ pixels. The example omits scrollbar size, padding complications and content extending in the opposite direction; it is an interval calculation, not a universal formula for every writing direction.

A scrollbar is not the definition of a CSS scroll container. overflow: hidden suppresses ordinary scrolling controls but can still permit programmatic scrolling, whereas overflow: clip forbids scrolling and does not create a scroll container. overflow: auto applies scrolling behavior as required by its rules.^[ref]

Scrolling changes which part of the laid-out contents is viewed. Descendant DOM nodes outside the scrollport can still exist in the document; clipping alone does not remove them. Conversely, a large DOM tree does not guarantee a large scrollable region if layout or overflow rules prevent it.

Distinguish this viewing mechanism from CSS containing block geometry and CSS flow-root. A containing block supplies layout references, while an independent formatting context governs layout participation. Neither term alone establishes that the contents can be scrolled.

A CSS used value is a value obtained after applying the calculations needed for layout. It can depend on geometry unavailable when the CSS computed value was established, such as the size of a CSS containing block or the sizes of related content.^[ref]

For example, an ordinary block whose computed width remains 50 percent can have a used content width of 200 CSS pixels in a 400-pixel containing block. Changing that containing block to 600 pixels yields 300 pixels, with the same computed percentage and with other constraints held fixed. The changed result follows from layout context rather than from a new source declaration.

A used width is also not necessarily the size of the whole outer box. With content-box sizing, padding, borders and margins are accounted for outside the content width. With box-sizing: border-box, the sizing edge is different. CSS minimum size and CSS maximum size constraints can alter the final result as well.^[ref]

Even after the used value has been determined, drawing on a particular device can require rounding or other permitted approximation. A fractional CSS length and a count of illuminated physical pixels are consequently different measurements. Stating the property, value stage, sizing edge and coordinate units makes a layout calculation reproducible.