CSS: Anchor Positioning

By Xah Lee. Date: 2026-08-19.

What is anchor positioning

CSS Anchor Positioning lets you position one element relative to another element (the "anchor").

You mark one element as the anchor, then tell another element to position itself relative to the anchor's position.

It's especially useful for Tooltips or Dropdown menus.

before this feature, you need to use JavaScript to calculate element's position in order to position a popup-box.

JS DOM: Create Tooltip

Basic syntax

.anchor {
 /* specify this element is the anchor, by giving it a anchor-name. */
 anchor-name: --my-anchor;
 /* must start with two hyphen */
}

.tooltip {
 /* link to the anchor */
 position-anchor: --my-anchor;

 /* required */
 position: absolute;

 /* Position top of tooltip to bottom of anchor */
 top: anchor(bottom);
 left: anchor(left);
}

Example

<p><span class="xanchor">I am anchor</span></p>

<div class="xtooltip">I'm a tooltip!</div>

.xanchor {
 anchor-name: --anchor-1936;
 border: solid 1px orange;
}

.xtooltip {
 position-anchor: --anchor-1936;

 position: absolute;

 top: anchor(bottom);
 left: anchor(left);

 border: solid 1px blue;
 border-radius: 8px;
}

Browser shows

I am anchor

I'm a tooltip!

Browser support