Web APIs, todayLab · Alex Harto

Anchor positioning

Tooltips, menus and popovers attached to their button, with CSS alone.

In your browser: checking…Reviewed 1 Oct 2026

An element is placed relative to another (anchor-name, position-anchor, position-area) and, if it does not fit, tries other positions (position-try-fallbacks). With popover and HTML commands (commandfor, command) you get accessible menus with no JavaScript and no libraries such as Floating UI.

It has worked in all three engines since January 2026 (Firefox 147). web-features 3.40.0 no longer marks it as Baseline because it now counts the anchor-valid and anchor-visible keywords, which only Safari 27 has.

What it is for

  • Tooltips and context menus that stay on screen
  • Labels that follow an element while scrolling
  • Custom pickers and dropdowns

Demo

Drag the dot. The label is anchored to it with CSS alone and, when it does not fit, switches sides (position-try-fallbacks). Below, menus built with popover and commandfor: no JavaScript.

Anchored label

Browser support

Limited availability
FeatureDesktopMobile
ChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
anchor-name and anchor()125Chrome: 125 125Edge: 125 147Firefox: 147 26Safari: 26 125Chrome: 125 147Firefox: 147 26Safari: 26
position-area1291Chrome: 129 1291Edge: 129 147Firefox: 147 26Safari: 26 1291Chrome: 129 147Firefox: 147 26Safari: 26
position-try-fallbacks128Chrome: 128 128Edge: 128 147Firefox: 147 26Safari: 26 128Chrome: 128 147Firefox: 147 26Safari: 26
commandfor / command135Chrome: 135 135Edge: 135 144Firefox: 144 26.2Safari: 26.2 135Chrome: 135 144Firefox: 144 26.2Safari: 26.2
  1. 1The position-area property changes the position of absolutely positioned elements that do not find an anchor. See bug 388575663.

Compatibility generated on every deploy from MDN browser-compat-data 8.1.3 (24 Sep 2026) · web-features 3.40.0 · checked by hand: 1 Oct 2026

Minimal code

<!doctype html>
<meta charset="utf-8">
<title>Anchor positioning · ejemplo mínimo</title>
<style>
  body { font: 16px system-ui; min-height: 150vh; padding: 40vh 2rem; }
  /* 1 · El ancla tiene un nombre */
  #info { anchor-name: --info; }
  /* 2 · El popover se coloca respecto a ella y cambia de lado si no cabe */
  #tip {
    position-anchor: --info;
    position-area: block-end;
    position-try-fallbacks: flip-block, flip-inline;
    margin: 8px; inset: auto;
    max-width: 240px; padding: 8px 12px; border: 1px solid #999;
  }
</style>
<!-- popover + commandfor: abrir y cerrar sin JavaScript -->
<button id="info" commandfor="tip" command="toggle-popover">¿Qué es esto?</button>
<div id="tip" popover>
  Un popover anclado al botón con CSS. Desplázate: si no cabe debajo, se coloca encima.
</div>
Open the example ↗apis-snippets/anchor-positioning/ · The repositories will be published soon.

What’s new

  1. Safari 27: transform-aware anchoring and the anchor-valid and anchor-visible keywords (singular).
  2. Chrome 151 and Firefox 151 adopt the new initial value normal for position-anchor (Safari in 27).
  3. It stays in Interop 2026.
  4. Firefox 147 ships it: now in all three engines.
  5. commandfor and command become Baseline (Safari 26.2).

Keep in mind

  1. Anchoring creates no accessibility relationship: add the ARIA you need or use popover with commandfor.
  2. Popovers come with inset: 0 and margin: auto from the browser; set inset: auto before anchoring them.
  3. For older browsers there is the @oddbird/css-anchor-positioning polyfill (0.10.2).

Further reading

Sources