APIs de la web, hoyLaboratorio · Alex Harto

Anchor positioning

Tooltips, menús y popovers pegados a su botón, solo con CSS.

En tu navegador: comprobando…Revisado 1 oct 2026

Un elemento se coloca respecto a otro (anchor-name, position-anchor, position-area) y, si no cabe, prueba otras posiciones (position-try-fallbacks). Con popover y los comandos de HTML (commandfor, command) salen menús accesibles sin JavaScript ni librerías como Floating UI.

Funciona en los tres motores desde enero de 2026 (Firefox 147). web-features 3.40.0 ya no la marca como Baseline porque ahora cuenta las palabras clave anchor-valid y anchor-visible, que solo tiene Safari 27.

Para qué sirve

  • Tooltips y menús contextuales que no se salen de la pantalla
  • Etiquetas que siguen a un elemento al desplazarse
  • Selectores y desplegables a medida

Demo

Arrastra el punto. La etiqueta está anclada a él solo con CSS y, cuando no cabe, cambia de lado (position-try-fallbacks). Debajo, menús con popover y commandfor: sin JavaScript.

Etiqueta anclada

Compatibilidad

Disponibilidad limitada
FunciónEscritorioMóvil
ChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
anchor-name y 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.

Compatibilidad generada en cada publicación desde MDN browser-compat-data 8.1.3 (24 sep 2026) · web-features 3.40.0 · revisión manual: 1 oct 2026

Código mínimo

<!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>
Abrir el ejemplo ↗apis-snippets/anchor-positioning/ · Los repositorios se publicarán pronto.

Novedades

  1. Safari 27: anclaje con transformaciones y las palabras clave anchor-valid y anchor-visible (en singular).
  2. Chrome 151 y Firefox 151 adoptan el nuevo valor inicial normal de position-anchor (Safari, en la 27).
  3. Sigue en Interop 2026.
  4. Firefox 147 la activa: ya está en los tres motores.
  5. commandfor y command son Baseline (Safari 26.2).

Ten en cuenta

  1. Anclar no crea relación de accesibilidad: añade el ARIA que haga falta o usa popover con commandfor.
  2. Los popovers traen inset: 0 y margin: auto del navegador; ponles inset: auto antes de anclarlos.
  3. Para navegadores antiguos existe el polyfill @oddbird/css-anchor-positioning (0.10.2).

Más información

Fuentes