CSS anchor() Function

CSS anchor() Function

The CSS anchor() function positions an absolutely positioned element relative to a named or implicit anchor element. It returns a position based on an anchor's edge or center, making it useful for tooltips, popovers, menus, and other interface elements that need to follow a specific element.

Syntax

anchor(<anchor-name>? <anchor-side>, <fallback>?)

The anchor() function uses an optional anchor name, a required anchor side, and an optional fallback length or percentage.

For example:

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

This positions the tooltip's top edge at the bottom edge of the element named --button.

An offset can be added using calc():

.tooltip {
  position: absolute;
  top: calc(anchor(--button bottom) + 8px);
}

This places the tooltip 8 pixels below the anchor's bottom edge.

The function is intended for inset properties such as top, right, bottom, left, and their logical equivalents.

Parameters

The anchor() function accepts the following components.

Examples include:

anchor(--button top)
anchor(--button right)
anchor(--button bottom)
anchor(--button left)
anchor(--button center)
anchor(--button 50%)
anchor(--button bottom, 20px)

When using a named anchor, its name must begin with two hyphens.

The fallback is separated from the anchor-side argument by a comma.

How It Works

CSS anchor positioning connects a positioned element to another element that serves as its anchor.

The basic process involves three steps:

1. Assign an anchor name to the reference element using anchor-name.
2. Set the positioned element to position: absolute or position: fixed.
3. Use anchor() in an inset property to align the positioned element with the anchor.

For example:

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

The tooltip's top edge aligns with the button's bottom edge, and its left edge aligns with the button's left edge.

When the anchor moves, the browser can update the positioned element's location automatically.

Anchor positioning is particularly useful for floating interface elements that should remain attached to a trigger or reference element.

Anchor Sides

The <anchor-side> value determines which part of the anchor element is used for positioning.

For example:

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

The tooltip appears directly below the anchor and aligns with its left edge.

Percentage values allow positions between the anchor's edges. For example, 50% represents the center along the relevant axis.

Some anchor-side values are restricted to compatible inset axes, so the chosen side must be valid for the property being used.

Named Anchors

Named anchors are created with the anchor-name property.

For example:

.trigger {
  anchor-name: --trigger;
}
.popup {
  position: absolute;
  top: anchor(--trigger bottom);
  left: anchor(--trigger left);
}

The --trigger identifier connects the popup's positioning calculations to the trigger element.

Multiple elements can have different anchor names:

.first-button {
  anchor-name: --first;
}
.second-button {
  anchor-name: --second;
}
.first-tooltip {
  position: absolute;
  top: anchor(--first bottom);
}
.second-tooltip {
  position: absolute;
  top: anchor(--second bottom);
}

Each tooltip can reference its corresponding anchor.

The named anchor must be eligible for the positioned element. Eligibility depends on factors such as document structure, positioning context, and anchor visibility.

The position-anchor property can also identify a default anchor, allowing the anchor name to be omitted from individual anchor() calls.

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

This uses the element named --trigger as the default anchor.

Fallback Values

The anchor() function accepts an optional fallback value.

For example:

.tooltip {
  position: absolute;
  top: anchor(--button bottom, 20px);
}

If the anchor position cannot be resolved, the function uses 20px as the fallback value.

Fallback values can also be percentages:

.tooltip {
  position: absolute;
  left: anchor(--button left, 10%);
}

The fallback provides an alternative inset value when the anchor reference is invalid or unavailable.

It does not automatically detect whether the positioned element fits within the viewport.

For overflow handling, CSS anchor positioning provides additional features such as position-try-fallbacks and position-try-order.

Example

The following example positions a tooltip below a button using anchor().

The button is assigned the anchor name --demo-button. The tooltip uses the button's bottom and left edges to determine its position.

HTML:

<div class="anchor-demo">
  <button class="anchor-trigger" type="button">Anchor Button</button>
  <div class="anchor-tooltip">Positioned below the button</div>
</div>

CSS:

.anchor-demo {
  position: relative;
  min-height: 130px;
  padding: 20px;
  border: 1px solid #ddd;
}
.anchor-trigger {
  anchor-name: --demo-button;
  padding: 10px 16px;
  border: 0;
  background-color: #0066cc;
  color: #fff;
}
.anchor-tooltip {
  position: absolute;
  top: 68px;
  left: 20px;
  top: calc(anchor(--demo-button bottom) + 8px);
  left: anchor(--demo-button left);
  padding: 10px 14px;
  background-color: #333;
  color: #fff;
  white-space: nowrap;
}

In browsers that support CSS anchor positioning, the tooltip is positioned 8 pixels below the button and aligned with its left edge.

Browsers that do not support anchor() use the preceding fixed-position fallback declarations.

The example demonstrates positioning only. The button does not open or close the tooltip.

Common Uses

The anchor() function is useful for interface elements that need to be positioned relative to another element.

For example, a floating menu can be aligned with the bottom-right corner of a trigger:

.menu {
  position: absolute;
  top: anchor(--trigger bottom);
  right: anchor(--trigger right);
}

This aligns the menu's top edge with the trigger's bottom edge and its right edge with the trigger's right edge.

Limitations

The anchor() function has several important limitations.

• It is intended for absolutely or fixed-positioned elements.
• It must be used in a compatible inset property or supported positioning context.
• The referenced anchor must be eligible for the positioned element.
• Some anchor-side values are valid only for particular positioning axes.
• The function does not automatically prevent viewport overflow.
• Browser support varies, particularly in older browsers.
• A fallback value does not replace the need for appropriate overflow handling.

For example, the following declaration is not a valid use of anchor():

.example {
  width: anchor(--button right);
}

The width property does not accept anchor(). Use anchor-size() when a dimension based on an anchor is needed.

Also, an anchor name alone does not guarantee that a positioned element can reference it. The anchor must satisfy the applicable eligibility rules.

Browser Support

The anchor() function is part of CSS Anchor Positioning. It is a newer CSS feature with limited availability across browsers and is not Baseline Widely available.

Browsers without support ignore declarations containing unsupported anchor() values.

For broader compatibility, provide conventional positioning declarations before anchor-based declarations:

.tooltip {
  position: absolute;
  top: 60px;
  left: 20px;
  top: anchor(--button bottom, 60px);
  left: anchor(--button left, 20px);
}

You can test for support using @supports:

@supports (top: anchor(bottom)) {
  .tooltip {
    top: anchor(--button bottom);
  }
}

For current compatibility information, visit Can I Use? and search for CSS Anchor Positioning.

Specifications

The anchor() function is defined in the CSS Anchor Positioning Module Level 1 .

The specification defines how positioned elements reference anchor edges and use those positions in CSS inset calculations.

Related features include anchor-name, position-anchor, anchor-size(), and position fallback properties.