CSS Anchor Positioning

CSS anchor positioning allows a positioned element to be associated with another element and positioned relative to it. The reference element is called the anchor, while the element placed relative to it is the anchor-positioned element.

Anchor positioning is useful for interface elements such as tooltips, menus, labels, information boxes, and other content that needs to remain positioned relative to another element.

How Anchor Positioning Works

Basic anchor positioning involves three steps:

Give the anchor element an anchor name.
Associate a positioned element with that anchor.
Specify where the positioned element should appear relative to the anchor.

.button {
  anchor-name: --menu-anchor;
}
.menu {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: bottom;
}

The .button element becomes the named anchor. The absolutely positioned .menu is associated with that anchor and placed below it.

Anchor names are custom identifiers that begin with two hyphens, similar in appearance to custom property names.

The anchor-name Property

The anchor-name property identifies an element as an anchor that other positioned elements can reference.

.button {
  anchor-name: --menu-anchor;
}

The anchor name is a dashed identifier and therefore begins with two hyphens.

An anchor can also have more than one name.

.button {
  anchor-name: --menu-anchor, --help-anchor;
}

Different positioned elements can then reference the appropriate anchor name.

The position-anchor Property

The position-anchor property associates an absolutely or fixed positioned element with a named anchor.

.button {
  anchor-name: --menu-anchor;
}
.menu {
  position: absolute;
  position-anchor: --menu-anchor;
}

The matching names establish the relationship between the two elements. Association alone does not determine where the positioned element appears. A positioning method such as position-area or the anchor() function is also needed.

If several elements use the same visible anchor name, the relationship can depend on source order and scope. The anchor-scope property can limit an anchor name to a particular subtree when repeated components need independent anchors.

The position-area Property

The position-area property provides a convenient way to place an anchor-positioned element around its associated anchor.

.tooltip {
  position: absolute;
  position-anchor: --help-anchor;
  position-area: top;
}

The property uses an implicit grid around the anchor. The anchor occupies the center area, while other areas represent positions around it.

For example:

.top {
  position-area: top;
}
.bottom {
  position-area: bottom;
}
.left {
  position-area: left;
}
.right {
  position-area: right;
}

Two values can provide more specific placement.

.tooltip {
  position-area: top right;
}

Logical values are also available, allowing placement to follow writing direction rather than fixed physical sides.

The anchor() Function

The anchor() function provides more precise control by allowing inset properties to reference a side of an anchor.

.tooltip {
  position: absolute;
  position-anchor: --help-anchor;
  top: anchor(bottom);
  left: anchor(left);
}

Here, the top edge of the positioned element is placed at the bottom edge of its default anchor, while its left position is related to the anchor's left edge.

An anchor name can also be supplied directly to the function.

.tooltip {
  top: anchor(--help-anchor bottom);
}

This is useful when an element needs to reference a particular anchor explicitly.

The anchor-size() Function

The anchor-size() function allows the size of an anchor-positioned element to depend on the size of an anchor.

.menu {
  position: absolute;

  position-anchor: --menu-anchor;
  width: anchor-size(width);
}

This can make a menu or other positioned element match the width of its associated anchor.

Anchor-relative sizing can also participate in calculations.

.menu {
  min-width: anchor-size(width);
  max-width: calc(anchor-size(width) * 2);
}

This provides a way to create size relationships between separate elements without manually repeating fixed dimensions.

Centering on an Anchor

Anchor-positioned elements can use the anchor-center alignment value when they need to be centered relative to their default anchor along an alignment axis.

.tooltip {
  position: absolute;
  position-anchor: --help-anchor;
  top: anchor(bottom);
  justify-self: anchor-center;
}

The element is positioned below the anchor and centered relative to it along the appropriate axis.

This can be useful for tooltips and labels that should remain visually centered with the element they describe.

Fallback Positions

An anchor-positioned element may not fit in its preferred location. For example, a tooltip positioned above a button near the top of the viewport could extend beyond the visible area.

CSS anchor positioning includes position fallback features that allow the browser to try alternative placements when the preferred position does not fit.

.tooltip {
  position: absolute;
  position-anchor: --help-anchor;
  position-area: top;
  position-try-fallbacks: flip-block;
}

In this example, the browser can try the corresponding position on the opposite side of the block axis when the preferred placement would overflow.

More detailed fallback strategies can be created with the @position-try at-rule and related position-try properties.

Common Uses

Anchor positioning is useful when one interface element needs to remain spatially connected to another element.

Use	Example
Tooltips	Place explanatory content beside a control or link.
Menus	Position a menu relative to the button that opens it.
Information boxes	Keep additional information near the related content.
Form messages	Position validation or help text relative to a form control.
Labels and badges	Place supporting labels relative to another interface element.

Anchor positioning controls layout and placement. Interactive behavior, accessibility semantics, focus management, and whether content is shown or hidden may require appropriate HTML and other web platform features depending on the component.

Anchor Positioning Practices

Practice	Purpose
Use descriptive anchor names	Makes relationships between anchors and positioned elements easier to understand.
Use position-area for common placement	Provides a concise way to position elements around an anchor.
Use anchor() for precise placement	Allows inset properties to reference specific anchor edges.
Provide fallback positions when needed	Helps positioned content remain visible when the preferred location would overflow.
Keep accessibility separate from placement	Ensures visual positioning does not replace semantic HTML, keyboard access, or appropriate interaction behavior.
Check browser support	Helps determine whether a fallback layout is needed for older browsers.

CSS Anchor Positioning Example

The following example identifies a button as an anchor and positions an information box below it.

.anchor {
  anchor-name: --example-anchor;
}
.info {
  position: absolute;
  position-anchor: --example-anchor;
  position-area: bottom;
}

Open the example in the editor and change position-area: bottom to top, left, or right to see how the information box moves around its anchor.

Play in Editor