Introducción

Posicionar elementos flotantes (tooltips, popovers, menús) respecto a un elemento de referencia ha sido un desafío complejo. Tradicionalmente se requería JavaScript con cálculos continuos de coordenadas usando getBoundingClientRect(). La API de Posicionamiento con Anclajes CSS resuelve esto manejando coordenadas flotantes de forma nativa en el navegador.

¿Qué es CSS Anchor Positioning?

Es un estándar que permite anclar un elemento con posición absoluta o fija directamente a otro elemento usando solo CSS. Beneficios: cero JavaScript, rendimiento superior (compositor thread), y aislamiento de diseño evitando restricciones de recorte del padre.

Configuración básica

1. Declarar anchor-name en el elemento ancla. 2. Usar position-anchor en el objetivo. 3. Alinear con anchor().

.my-anchor { anchor-name: --anchor-button; }
.my-tooltip { position: absolute; position-anchor: --anchor-button; top: anchor(bottom); left: anchor(center); }

position-try-fallbacks

Maneja colisiones con viewport dinámicamente: flip-block invierte vertical, flip-inline ajusta horizontal. Se pueden definir layouts personalizados con @position-try.

Integración con Popover API

Combinado con popover y popovertarget, crea menús desplegables accesibles sin JavaScript.

Soporte

Completo en Chromium. En progreso en Safari y Firefox. Existe un polyfill oficial.