Durante años, colocar un tooltip bajo un botón o un menú junto a su disparador exigía una biblioteca JavaScript que medía rectángulos en cada desplazamiento. El posicionamiento de anclaje CSS elimina esa dependencia. Ya Baseline en 2026, permite vincular un elemento a otro, recolocarlo cuando desborda la ventana y ocultarlo en el momento adecuado, íntegramente en CSS.
El problema que resuelve el posicionamiento de anclaje
Un menú desplegable, un tooltip o un popover deben colocarse respecto a otro elemento: el botón que los abre. Mientras ese anclaje no existió en CSS, la única solución fiable era calcular las coordenadas en JavaScript. Bibliotecas como Floating UI, y Popper antes de ella, existían precisamente para eso: medir la posición del disparador, la de la ventana y recalcular en cada desplazamiento y cada redimensionamiento.
Ese enfoque funciona, pero tiene un coste. Añade JavaScript al paquete, obliga a escuchar eventos de desplazamiento e introduce un posible desfase visual entre el movimiento de la página y la recolocación del elemento. El posicionamiento de anclaje confía ese trabajo al motor de renderizado, que lo hace en el momento justo, sin script intermedio.
La tabla siguiente resume lo que cambia al pasar de una biblioteca de posicionamiento al CSS nativo en un componente de menú o tooltip estándar.
| Aspecto | Biblioteca JavaScript | Posicionamiento de anclaje CSS |
|---|---|---|
| Peso añadido | Unos kilobytes de script | Ningún script |
| Recolocación al desplazar | Recálculo mediante un escuchador de eventos | A cargo del motor de renderizado |
| Repliegue fuera de pantalla | Lógica de colisión por escribir | position-try-fallbacks |
| Ocultar cuando el ancla sale de vista | Por gestionar manualmente | position-visibility |
Lo que Floating UI hacía en JavaScript en cada desplazamiento, el navegador lo hace ahora de forma nativa, en el momento del renderizado.
Las propiedades básicas: anchor-name, position-anchor y anchor()
El mecanismo se apoya en dos papeles. Un elemento se declara como ancla con anchor-name. Otro, posicionado en absolute o fixed, se vincula a esa ancla con position-anchor y lee sus lados con la función anchor().
.declencheur {
anchor-name: --menu-profil;
}
.infobulle {
position: absolute;
position-anchor: --menu-profil;
/* le haut de l'infobulle s'aligne sous le bas de l'ancre */
top: anchor(bottom);
left: anchor(left);
margin-top: 8px;
}
La función anchor() acepta palabras clave de lado (top, bottom, start, end, center) y un porcentaje. No se codifica ninguna coordenada: la colocación sigue al ancla esté donde esté en la página.
position-area: la colocación en una sola declaración
Para los casos habituales, usar anchor() lado a lado resulta verboso. La propiedad position-area describe la colocación sobre una cuadrícula de tres por tres centrada en el ancla, en una sola línea.
.infobulle {
position: absolute;
position-anchor: --menu-profil;
/* placée sous l'ancre, alignée au centre horizontal */
position-area: bottom center;
margin-top: 8px;
}
Los valores se leen como un par fila / columna: top left, bottom center, span-all para ocupar toda una banda. Es la forma más legible de expresar una colocación estándar.
Mantenerse en pantalla: position-try-fallbacks y @position-try
Un menú colocado bajo su botón debe pasar arriba cuando ya no hay sitio en la parte inferior de la pantalla. Ese es el papel de las posiciones de repliegue. position-try-fallbacks enumera alternativas que el motor prueba por orden hasta encontrar una que quepa en la ventana.
.infobulle {
position: absolute;
position-anchor: --menu-profil;
position-area: bottom center;
/* si ça déborde en bas, retenter en miroir vertical, puis horizontal */
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}
/* repli sur mesure, réutilisable */
@position-try --au-dessus {
position-area: top center;
margin-bottom: 8px;
margin-top: 0;
}
Las palabras clave flip-block y flip-inline cubren la mayoría de las necesidades: voltear en vertical o en horizontal. Para un control más fino, una regla @position-try con nombre define un conjunto completo de propiedades que aplicar como repliegue.
Combinar con el popover nativo y ocultar con limpieza
El posicionamiento de anclaje se asocia de forma natural con el atributo HTML popover, que gestiona la apertura, el cierre al hacer clic fuera y la capa superior sin JavaScript. El ancla se declara en el disparador y el popover se vincula desde el CSS.
<button popovertarget="menu" style="anchor-name: --btn">Profil</button>
<div id="menu" popover style="position-anchor: --btn; position-area: bottom span-right">
<a href="/compte/">Compte</a>
<a href="/deconnexion/">Se déconnecter</a>
</div>
Queda el caso en que el ancla se sale de la vista al desplazar: el elemento vinculado pierde sentido flotando solo. La propiedad position-visibility lo oculta automáticamente en cuanto su ancla abandona la pantalla.
.infobulle {
position-visibility: anchors-visible;
}
No olvidar la accesibilidad
Delegar la colocación en el CSS no elimina el trabajo semántico. Un menú abierto con el atributo popover recibe del navegador la gestión del foco y el cierre con la tecla Escape, pero el vínculo entre disparador y contenido debe seguir siendo explícito para las tecnologías de asistencia. El botón conserva un aria-expanded que refleja el estado de apertura, y el popover describe su papel cuando se trata de un menú de navegación.
<button popovertarget="menu" aria-expanded="false"
aria-controls="menu" style="anchor-name: --btn">Profil</button>
<nav id="menu" popover aria-label="Menu du compte"
style="position-anchor: --btn; position-area: bottom span-right">
<a href="/compte/">Compte</a>
<a href="/deconnexion/">Se déconnecter</a>
</nav>
La colocación, en sí, sigue siendo puramente visual: no altera ni el orden del documento ni el orden de tabulación. Un elemento vinculado visualmente por encima de su ancla permanece, en el árbol de accesibilidad, en el lugar que ocupa en el marcado. Es una ventaja, siempre que el popover se coloque en un punto coherente del código.
Ancla
position-area: bottom
Ancla
flip-block
→
Repliegue automático cuando no cabe abajo
Estado del soporte y estrategia de repliegue
El posicionamiento de anclaje alcanzó el estado Baseline en 2026, una vez que se entregó por defecto en los tres motores principales. La colocación básica funciona en todas partes; solo las posiciones de repliegue a medida llegaron algo más tarde a Safari.
| Motor | Versión | Compatibilidad |
|---|---|---|
| Chrome / Edge | 125 (2024) | Completa, incluidos los repliegues |
| Safari | 18.2 (base) · 18.4 (@position-try) | Colocación desde 18.2, repliegues desde 18.4 |
| Firefox | Activado por defecto a principios de 2026 | Completa |
Punto de atención. Las posiciones de repliegue a medida definidas con @position-try solo llegaron con Safari 18.4. Un componente que dependa de un repliegue complejo debe prever una degradación limpia en las versiones anteriores, en lugar de dejar que un menú desborde la pantalla.
Para el público que aún usa versiones antiguas, basta con una mejora progresiva: una colocación estática por defecto, enriquecida bajo condición con @supports.
.infobulle { top: 100%; left: 0; } /* repli statique */
@supports (position-anchor: --x) {
.infobulle { position-area: bottom center; }
}
Lo que hay que recordar
El posicionamiento de anclaje CSS sustituye, en la mayoría de menús, tooltips y popovers, una dependencia de JavaScript considerada durante mucho tiempo ineludible. Tres propiedades cubren lo esencial: anchor-name para designar el ancla, position-area para colocar y position-try-fallbacks para mantenerse en pantalla. Junto al atributo popover, permite construir componentes de interfaz completos sin script, con un repliegue limpio para los navegadores más antiguos.
Este año retiré Floating UI de dos proyectos, y la ganancia más clara no es el tamaño del paquete: es la desaparición de toda una categoría de errores de posicionamiento al desplazar. Mantengo, eso sí, una reserva: en cuanto un componente necesita una colocación realmente dinámica, guiada por los datos, la lógica JavaScript vuelve, y está muy bien así. Lo nativo cubre los casos habituales, no todos. — Simon Janvier
Para saber más: la referencia completa está documentada en MDN — CSS anchor positioning.
También en Mail Studio
» class=»lazy-load-youtube preview-lazyload preview-youtube» data-video-title=»A couple of great anchor positioning use cases» title=»Play video «A couple of great anchor positioning use cases»»>https://www.youtube.com/watch?v=lXS2P3xtAUY
