anchor()
Returns the position of a side of the anchor element; used in `top`, `left`, `right`, `bottom` to attach an element to it.
Syntax
top: anchor(--name side, fallback);Parameters
| Parameter | Type | Description |
|---|---|---|
| --name | dashed ident | Optional. The anchor; without it the one from `position-anchor` is used. |
| side | top | bottom | left | right | center | % | Which edge of the anchor to measure: `top`, `bottom`, `left`, `right`, `center` or a percentage. |
| fallback | length | Optional. The value used if the anchor is not found. |
Examples
A label whose left edge starts at the middle of the box and whose top edge touches its bottom:
<style>
.box { anchor-name: --box; width: 160px; height: 60px; background: lightblue; }
.label {
position: absolute;
top: anchor(--box bottom);
left: anchor(--box center);
background: navy; color: white; padding: 2px 8px;
}
</style>
<div class="box"></div>
<span class="label">Starts at the center</span>Notes
The side should match the property: in top and bottom use vertical sides (top, bottom, center), in left and right horizontal ones. The related anchor-size() returns the anchor's width or height: width: anchor-size(width). For simple cases position-area is shorter.
See also
- anchor-name — Names an element as an anchor, so that an absolutely positioned element anywhere on the page can be placed next to it.
- position-anchor — Chooses the default anchor for an absolutely or fixed positioned element; `position-area` and `anchor()` then measure from it.
- position-area — Places an anchored element in one of nine cells of an imaginary 3 × 3 grid around its anchor.
- top, right, bottom, left — The offsets of a positioned element from the edges of its reference box: top, right, bottom and left.
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.