CSS anchor() Function for Coordinate Offsets

The CSS anchor() function is a core feature of the CSS Anchor Positioning API designed to tether an absolutely or fixed positioned element to another element on the page, known as the anchor. By resolving to a specific coordinate offset, anchor() enables developers to dynamically position floating interface elements—such as tooltips, dropdown menus, and popovers—relative to target elements using pure CSS, eliminating the need for complex JavaScript coordinate calculations.

Purpose and Functionality

Traditionally, positioning an element relative to another requires nesting it inside a parent container with position: relative or calculating offsets via JavaScript using getBoundingClientRect(). The anchor() function removes these structural limitations. It computes length values based on the boundaries of an associated anchor element, allowing an element positioned anywhere in the DOM to align accurately with a target element's coordinates.

The function is used inside inset properties (top, left, bottom, right, inset-block-start, inset-inline-start, etc.) to define the offset distance between the positioned element and the anchor element's specified edges.

Syntax and Parameters

The basic syntax of the anchor() function is:

anchor(<anchor-element>? <anchor-side>, <fallback-value>?)
  1. <anchor-element> (Optional): Specifies the name of the anchor element defined via the anchor-name property (e.g., --tooltip-trigger). If omitted, the browser defaults to the element designated by the positioned element's position-anchor property.
  2. <anchor-side> (Required): Defines the edge or point of the anchor to align against. Accepted values include:
    • Physical edges: top, right, bottom, left
    • Logical edges: start, end, self-start, self-end
    • Position markers: center or percentage values (e.g., 50%)
  3. <fallback-value> (Optional): A length or percentage used if the anchor element cannot be found or resolved.

Computing Coordinate Offsets

When the browser evaluates anchor(), it determines the exact pixel position of the target anchor edge within the coordinate system of the positioned element's containing block.

For instance, consider a floating menu positioned directly beneath a button:

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

.floating-menu {
  position: fixed;
  position-anchor: --menu-trigger;
  top: anchor(bottom);
  left: anchor(left);
}

In this example:

  • top: anchor(bottom) computes the offset from the top of the viewport (the containing block) to the bottom edge of the --menu-trigger element.
  • left: anchor(left) aligns the left boundary of the menu with the left boundary of the trigger.

Combining with Mathematical Functions

The values returned by anchor() are valid length expressions, meaning they can be incorporated into calc(), min(), max(), and clamp() to introduce spacing or custom offsets:

.tooltip {
  position: absolute;
  top: calc(anchor(--target-btn bottom) + 8px);
  left: anchor(--target-btn center);
  transform: translateX(-50%);
}

Here, the calc() function adds an 8-pixel gap below the anchor's bottom edge, while anchor(--target-btn center) identifies the horizontal midpoint to center-align the tooltip.