anchor-name
Names an element as an anchor, so that an absolutely positioned element anywhere on the page can be placed next to it.
Syntax
anchor-name: --name;Values
| Parameter | Type | Description |
|---|---|---|
| --name | dashed ident | The anchor name; it starts with two dashes, like a custom property. |
| none | keyword | The default: the element is not an anchor. |
Examples
A badge attached to the corner of a button:
<style>
.btn { anchor-name: --cart; margin: 24px; padding: 8px 16px; }
.badge {
position: absolute;
position-anchor: --cart;
position-area: top right;
translate: -50% 50%;
background: crimson; color: white;
border-radius: 10px; padding: 0 6px; font-size: 12px;
}
</style>
<button class="btn">Cart</button>
<span class="badge">3</span>Notes
The anchor and the positioned element do not have to be parent and child — that is the main difference from the usual position: absolute inside position: relative. If several elements have the same name, the last one wins. Part of CSS anchor positioning: Chrome and Edge since 2024, Safari since version 26; check support in Firefox before relying on it.
See also
- position-anchor — Chooses the default anchor for an absolutely or fixed positioned element; `position-area` and `anchor()` then measure from it.
- anchor() — Returns the position of a side of the anchor element; used in `top`, `left`, `right`, `bottom` to attach an element to it.
- position-area — Places an anchored element in one of nine cells of an imaginary 3 × 3 grid around its anchor.
- position — How an element is positioned: in the normal flow or by offsets.
Related recipes
In the tutorial
- Anchor positioning — CSS anchor positioning — how to attach a tooltip or menu to another element: anchor-name, position-anchor, the anchor() function, position-area, fallback positions with position-try-fallbacks and browser support.