CSS Anchor Positioning

Advanced

CSS Anchor Positioning extends positioned layout so an absolutely positioned box can size and position itself relative to one or more anchor elements elsewhere on the page. This lesson owns the anchor relationship, anchor lookup, anchor-based positioning and sizing, and position fallback machinery. It does not replace the Positioned Layout lesson's ownership of position schemes and containing blocks, the Sizing lesson's general sizing model, or the Container Queries lesson's @container and container-relative units.

The current W3C CSS Anchor Positioning Level 1 publication is a Working Draft dated 6 September 2026. Level 2 is a First Public Working Draft dated 21 October 2025 and is a delta specification that currently adds anchored container queries. Treat Level 2 as draft material rather than folding its @container extensions into this Level 1 lesson.

The anchor-positioning model

Ordinary absolute positioning is expressed relative to a containing block. Anchor positioning adds a second relationship: the positioned box can refer to the position or size of an anchor box. The anchor is not merely a visual decoration; the specification defines how an anchor is named, found, scoped, and judged acceptable before anchor-dependent values can resolve.

position-anchor: ?;

Creating and scoping anchor names

The anchor-name property declares that an element's principal box can be an anchor box and gives it one or more anchor names. Names are dashed-ident values and are not required to be globally unique. The anchor-scope property can limit where named anchors are visible, which is useful when repeated components would otherwise expose the same anchor name to unrelated positioned boxes.

anchor-scope: ?;

Finding the default anchor

position-anchor specifies the default anchor element used by position-area, position-try, and anchor functions when they omit an explicit anchor name. The current Level 1 syntax includes normal, none, auto, a named anchor, and match-parent. The lookup rules also define acceptable anchors and prevent circular layout dependencies by requiring the anchor to be laid out before the positioned element in the relevant relationship.

The specification also allows host-language features to define implicit anchor elements. The CSS module can consume such an implicit anchor through auto or an omitted anchor reference, but the host language owns the feature that establishes that implicit relationship.

position-anchor: ?;

Positioning with position-area

anchor-center centers a positioned box over its default anchor

The current Anchor Positioning Level 1 draft adds the `anchor-center` value to `justify-self` and `align-self`. For an absolutely positioned box with a default anchor, it centers the box over that anchor in the relevant axis, avoiding the extra inset arithmetic otherwise needed for this common anchored-placement case.

?

position-area provides a grid-oriented way to place an absolutely positioned box relative to its default anchor box. The specification models a 3×3 position-area grid and lets authors choose rows and columns with physical or logical keywords such as top, bottom, block-start, inline-end, center, and span-all. The keywords are interpreted using the writing mode of the relevant boxes, so logical values are preferable when the design should adapt to writing modes.

position-area: ?;

Using anchor() for explicit edge relationships

The anchor() function can be used in inset properties to refer directly to an anchor box edge. It accepts an optional anchor name, an anchor-side such as top, bottom, start, end, inside, outside, self-start, self-end, a percentage or center, and an optional fallback length-percentage. Unlike position-area, anchor() is useful when the desired relationship is expressed directly in an inset rather than through the 3×3 grid.

If an anchor() function cannot resolve to the required anchor relationship, its optional fallback value can supply the value to use. Without an applicable fallback, the declaration can become invalid at computed-value time. Keep this distinction in mind when debugging: the CSS declaration may parse successfully while a later resolution step still determines whether the value is usable.

inset-inline-start: anchor(?);

Sizing from an anchor with anchor-size()

anchor-size() lets an absolutely positioned box refer to the size of an anchor box from a sizing-related declaration. It can refer to physical dimensions such as width or height, or logical dimensions such as block and inline, and it can also take an explicit anchor name. The function can include a fallback length-percentage for cases where the anchor-size reference cannot resolve.

min-inline-size: anchor-size(?);

Fallback positioning when space is tight

Anchor positioning can produce overflow when an anchor is near an edge. Level 1 provides position-try-fallbacks, position-try-order, the position-try shorthand, and named @position-try rules. The user agent can try position options when the initial placement overflows its inset-modified containing block. The specification defines built-in try tactics such as flip-block and flip-inline, while named @position-try rules can supply restricted sets of positioning, sizing, margin, alignment, position-anchor, and position-area declarations.

position-try: ?;

Conditional hiding with position-visibility

position-visibility can conditionally hide an absolutely positioned box when anchor-related conditions make displaying it inappropriate. The current Level 1 syntax includes always, anchors-valid, anchors-visible, and no-overflow. For example, no-overflow can force the box hidden when it still overflows after position-try processing.

position-visibility: ?;

Ownership boundaries and specification maturity

Anchor Positioning is not a replacement for positioned layout. The Positioned Layout curriculum remains responsible for position values, ordinary containing blocks, insets, and the general coordinate-based positioning model. Anchor Positioning adds the relationship between a positioned box and an anchor box, plus anchor-specific placement, sizing, fallback, and visibility behavior.

Likewise, anchor-size() does not replace the general Sizing curriculum. It supplies an anchor-derived length inside the existing sizing model. Container Queries remain the owner of @container, container-type, container-name, and container-relative units; Anchor Positioning Level 2 adds an anchored container-query extension, but that draft material is intentionally not duplicated here.

The current Level 1 document is a W3C Working Draft dated 6 September 2026. Level 2 is a W3C First Public Working Draft dated 21 October 2025 and is explicitly a delta specification. The lesson therefore teaches Level 1 as the primary ownership surface and labels Level 2 only as a boundary note.

Accessibility: visual anchoring is not a semantic relationship

The specification states that CSS Anchor Positioning does not create, delete, or alter accessibility bindings between elements. A visual relationship created by anchoring is therefore not automatically a semantic relationship. Authors must use appropriate markup or host-language features when elements have a meaningful semantic connection.

anchor-name: ?;

Quick ownership test

Use this rule when deciding where a future CSS topic belongs: if the core question is how one positioned box refers to another box and how that relationship chooses, sizes, flips, or hides the positioned box, it belongs here. If the core question is how an element becomes positioned in the first place, how a containing block is formed generally, how a value is sized generally, or how @container queries work, follow the existing owner instead.