CSS anchor-name Syntax for Global Anchors

The CSS anchor-name property allows an element to declare itself as an anchor, enabling other absolute or fixed-positioned elements to position themselves relative to it. In CSS Anchor Positioning, anchor identifiers are registered globally across the document tree by default. This guide explains the exact syntax required to register a global anchor identifier and demonstrates how to apply it in your stylesheets.

The Syntax for anchor-name

To register an anchor identifier, assign a <dashed-ident> to the anchor-name property on the target element.

.anchor-element {
  anchor-name: --my-anchor;
}

Syntax Breakdown

• <dashed-ident>: The identifier must begin with two hyphens (--), identical to the naming convention for CSS custom properties (e.g., --tooltip-anchor, --menu-button). Non-dashed custom identifiers are invalid and will cause the declaration to be ignored.
• none: The default value, indicating that the element does not serve as an anchor.
• Multiple Anchors: You can register an element under multiple names by providing a comma-separated list of dashed identifiers:

.anchor-element {
  anchor-name: --primary-anchor, --fallback-anchor;
}

Global Scope Behavior

In the CSS Anchor Positioning specification, any identifier declared with anchor-name is globally available throughout the entire document by default. Any positioned element can reference --my-anchor from anywhere in the DOM tree, provided the anchor is not hidden or detached.

/* The Anchor Element */
.target-button {
  anchor-name: --action-button;
}

/* The Anchored Element */
.floating-popover {
  position: fixed;
  position-anchor: --action-button;
  top: anchor(bottom);
  left: anchor(center);
}

Unless a parent element explicitly bounds the name using the anchor-scope property (e.g., anchor-scope: --action-button;), the identifier remains global across the entire page.