Anchor Positioning

Anchor positioning had me wondered for a while, however after reading some articles about it I think this is a great addition to modern css.

Especially in use with some other new css/html additions like the popover api. And now support for Anchor positioning has landed in Safari 26 use in production is near (FireFox has it under a flag).

I really like the absolute relative positioning and the baked in fallback on smaller screens.

What does it do?

You can take an element like a button, link or image and use it as a trigger for a popup/over element.
And a second element that needs a position relatively to this trigger element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* Define an anchor element */
.anchor {
  anchor-name: --btn-anchor;
}

/* Anchor a target element */
.target {
  position: absolute;
  position-anchor: --btn-anchor;
}

/* Position a target element */
.target { 
  position-area: start end;
}

The anchored element is surrounded by a virtual grid of 9 spaces to use for positioning the second element. Here this grid is visualized with the logical names for each space.

However it is also possible to use the dimensions of the anchored element to set the coordinates of the paired element. Like in this tooltip example.

or combine it with the new appearance: base-select; for select elements. (Chrome, Edge and safari TP only)