Anchor positioning

The properties that place an absolutely positioned box next to another element, its anchor, wherever that element ends up: tooltips, menus and popovers that follow their button. One element is named as an anchor; the positioned box picks that anchor, says which side of it to sit on, and lists fallback placements for when it would not fit. The anchor() and anchor-size() functions, for use in insets and sizes, are under Values & references; the @position-try rule for named fallbacks is under Other at-rules; position itself is under Positioning, floats & columns.

A tooltip, end to end

The button names itself as an anchor; the tooltip is absolutely positioned, chooses that anchor, and sits above it. If there is no room above, it flips below.

<button class="help">Help</button>
<p class="tip" role="tooltip">Opens the user guide</p>

.help {
  anchor-name: --help;
}
.tip {
  position: absolute;
  position-anchor: --help;   /* use the button as the anchor */
  position-area: top;          /* above it, centred on it */
  margin-block-end: 0.5rem;    /* a small gap */
  position-try-fallbacks: flip-block;  /* below it if there is no room above */
}

The tooltip follows the button as the page scrolls or reflows, with no script.

Anchors

`anchor-name`

Makes an element an anchor and gives it one or more names. An <anchor-name> is a dashed identifier such as --help; positioned boxes refer to the anchor by that name.

Syntax	`none \| <anchor-name>#`
Initial	`none`
Applies to	All elements that generate a principal box
Inherited	No
Animation	Discrete
Support	Chrome 125 · Firefox 147 · Safari 26
Spec	css-anchor-position-1

If several elements share a name, a positioned box uses the last one in document order that it can see. Use anchor-scope to keep repeated components apart.

`anchor-scope`

Limits anchor names to this element's subtree, so a positioned box inside it can only find an anchor of that name inside it too. This lets every card in a list use the same --help name for its own button. all scopes every anchor name.

Syntax	`none \| all \| <anchor-name>#`
Initial	`none`
Applies to	All elements
Inherited	No
Animation	Discrete
Support	Chrome 131 · Firefox 147 · Safari 26
Spec	css-anchor-position-1

.card { anchor-scope: --help; }

Each card's tooltip anchors to the button in the same card.

`position-anchor`

Chooses the default anchor of an absolutely positioned box: the anchor that position-area places it against, and that anchor() uses when no name is given. Give an anchor name, or auto to use the element's implicit anchor, such as the button that opened a popover.

Syntax	`normal \| none \| auto \| <anchor-name> \| match-parent`
Initial	`normal`
Applies to	Absolutely positioned boxes
Inherited	No
Animation	Discrete
Support	Chrome 151 · Firefox 151 · Safari 27
Spec	css-anchor-position-1

Earlier versions (Chrome 125 · Firefox 147 · Safari 26) support the property with a different initial value, so naming the anchor explicitly works in all of them.

Placement

`position-area`

Places a box in one region of a three-by-three grid drawn round its default anchor, with the anchor in the centre cell. Give one keyword per axis to pick a row and a column; a span-* keyword covers the centre cell and the one next to it. With a single side keyword such as top, the other axis spans all three cells. The box's insets then default to the edges of that region and it aligns towards the anchor.

Syntax	`none \| <position-area>`
Initial	`none`
Applies to	Positioned boxes with a default anchor box
Inherited	No
Animation	Discrete
Support	Chrome 129 · Firefox 147 · Safari 26
Spec	css-anchor-position-1

Value	Places the box
`top`	Above the anchor, centred on it.
`right`	To the right of the anchor, centred on it vertically.
`top right`	Off the anchor's top right corner.
`bottom span-right`	Below the anchor, starting at its left edge and free to extend to the right.
`center`	Over the anchor itself.
`block-start`, `inline-end` …	The flow-relative forms, which follow the writing mode.

Chrome 125 to 130 also accept the property's older name, inset-area.

Fallbacks

`position-try`

Shorthand for position-try-order and position-try-fallbacks.

Syntax	`<'position-try-order'>? <'position-try-fallbacks'>`
Initial	See individual properties
Applies to	See individual properties
Inherited	See individual properties
Animation	See individual properties
Support	Chrome 125 · Firefox 147 · Safari 26
Spec	css-anchor-position-1

position-try: most-height flip-block, --side-menu;

Of the listed placements, try first the one that leaves the box the most height.

`position-try-fallbacks`

A comma-separated list of other placements to try, in order, when the box would overflow its containing block in its normal position. The first that fits is used. Each entry is a position-area value, the name of an @position-try rule, a try tactic that mirrors the current placement, or a name combined with a tactic.

Syntax	`none \| [ [<dashed-ident> \|\| <try-tactic>] \| <position-area> ]#`
Initial	`none`
Applies to	Absolutely positioned boxes
Inherited	No
Animation	Discrete
Support	Chrome 128 · Firefox 147 · Safari 26
Spec	css-anchor-position-1

Try tactic	Effect
`flip-block`	Swaps the block-start and block-end sides, so a box above the anchor moves below it.
`flip-inline`	Swaps the inline-start and inline-end sides.
`flip-start`	Swaps the block-start side with the inline-start side, mirroring across the diagonal.
`flip-x`	Swaps left and right.
`flip-y`	Swaps top and bottom.

flip-x and flip-y arrived later: Chrome 144 · Firefox 147 · Safari 26.2. Chrome 125 to 127 used the older name position-try-options.

`position-try-order`

Changes the order in which fallbacks are tried. normal tries them in the listed order; most-width, most-height, most-inline-size and most-block-size try first whichever gives the box the most space in that dimension.

Syntax	`normal \| <try-size>`
Initial	`normal`
Applies to	Absolutely positioned boxes
Inherited	No
Animation	Discrete
Support	Chrome 125 · Firefox 148 · Safari 26
Spec	css-anchor-position-1

Visibility

`position-visibility`

Hides an anchored box in certain conditions, so a tooltip does not float on its own after its anchor has been scrolled away.

Syntax	`always \| [ anchor-valid \|\| anchor-visible \|\| no-overflow ]`
Initial	`anchor-visible`
Applies to	Absolutely positioned boxes
Inherited	No
Animation	Discrete
Support	Chrome 125 · Firefox 147 · Safari 26.2
Spec	css-anchor-position-1

Value	Effect
`always`	Never hidden by this property.
`anchor-visible`	Hidden when its default anchor is scrolled completely out of view.
`anchor-valid`	Hidden when it has no default anchor to attach to.
`no-overflow`	Hidden when it still overflows its containing block after every fallback has been tried.

The spellings anchor-visible and anchor-valid are new in Safari 27. Chrome and Firefox, and earlier Safari, accept the older plural forms anchors-visible and anchors-valid (Chrome supports anchors-visible only).