position-anchor
Chooses the default anchor for an absolutely or fixed positioned element; `position-area` and `anchor()` then measure from it.
Syntax
position-anchor: --name;Values
| Parameter | Type | Description |
|---|---|---|
| --name | dashed ident | The name given to some element with `anchor-name`. |
| auto | keyword | The default: an implicit anchor if there is one (for example, the button that opened a popover). |
Examples
A tooltip placed under its field:
<style>
input { anchor-name: --email; margin-bottom: 48px; }
.hint {
position: absolute;
position-anchor: --email;
top: anchor(bottom);
left: anchor(left);
margin-top: 4px;
background: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 13px;
}
</style>
<input type="email" placeholder="Email">
<div class="hint">We never share your email.</div>Notes
position-anchor only says which anchor; where to put the element is set by position-area or by anchor() in top, left and the other inset properties. The element must have position: absolute or fixed.
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.
- 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.
- popover — Turns an element into a layer that pops up over the page — without JavaScript.
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.