CSS Anchor Positioning en 2026: tooltips, menús y popovers sin cálculos de JavaScript

Hay un patrón muy habitual en una interfaz web: un botón abre un menú, un icono muestra un tooltip, una tarjeta despliega información adicional o un control abre un pequeño panel junto a él. Durante años, colocar esos elementos de forma fiable ha obligado a combinar position: absolute o fixed, cálculos con JavaScript y bastante código para resolver el problema cuando el elemento llega al borde de la ventana.

CSS Anchor Positioning cambia esa relación. En lugar de decirle al navegador unas coordenadas calculadas desde fuera, podemos declarar que un elemento está relacionado con otro y dejar que CSS determine dónde colocarlo. La especificación de CSS Anchor Positioning incluye también mecanismos para probar posiciones alternativas cuando el contenido no cabe.

En 2026 la tecnología ha dado un paso importante: varias de sus piezas aparecen como Baseline 2026 en MDN y otras siguen teniendo una disponibilidad desigual. Por eso no conviene tratarla como un sustituto universal de las técnicas existentes. Sí merece, en cambio, formar parte de la caja de herramientas de quien diseña y desarrolla interfaces modernas.

Qué es CSS Anchor Positioning

La idea es sencilla: un elemento actúa como ancla y otro elemento puede posicionarse en relación con él. El segundo puede ser un tooltip, un menú, una etiqueta, un selector, una ayuda contextual o cualquier otro componente que necesite mantenerse vinculado visualmente a un control.

El cambio importante está en dónde se expresa esa relación. Con el posicionamiento absoluto tradicional solemos pensar en el contenedor y en sus coordenadas: arriba, abajo, izquierda, derecha, desplazamientos y tamaños. Con Anchor Positioning podemos describir la relación entre dos cajas. El navegador se encarga de resolver su posición dentro del modelo de CSS.

El estándar contempla varias piezas. anchor-name identifica el elemento que servirá como ancla; position-anchor permite asociar un elemento posicionado con esa ancla; position-area ofrece una forma sencilla de elegir una zona alrededor del ancla; y anchor() permite referirse a sus bordes desde propiedades de inserción como top, right, bottom o left. También existe anchor-size() para utilizar dimensiones del ancla.

MDN marca varias de estas funciones y propiedades como disponibles en Baseline 2026, pero position-anchor todavía figura con disponibilidad limitada. Esa diferencia es importante: que una parte de la API esté ampliamente disponible no significa que todas sus posibilidades puedan utilizarse sin comprobar compatibilidad.

Por qué resulta interesante para el diseño web

Para un diseñador web, la principal ventaja no es tener una propiedad CSS nueva que aprender. Es poder expresar mejor una relación visual que ya existe en el diseño.

Imagina un botón de perfil en la esquina superior derecha. Al pulsarlo aparece un panel con las opciones de usuario. El panel no pertenece conceptualmente al botón como contenido interno, pero sí está ligado a él. Si la ventana cambia de tamaño, el panel debe seguir al botón. Si el botón se mueve porque cambia el layout, el panel también debe adaptarse.

Otro caso frecuente es un tooltip. En una solución clásica, JavaScript puede medir el botón y calcular la posición del tooltip. Después hay que comprobar si queda fuera de la ventana y cambiar de lado. Anchor Positioning permite trasladar buena parte de esa lógica al navegador.

Esto puede simplificar componentes que antes mezclaban estructura HTML, estilos y lógica de posicionamiento. No significa que JavaScript desaparezca: seguirá siendo necesario para la interacción, el estado, la lógica de negocio o componentes que necesiten comportamiento más complejo. La diferencia es que el cálculo puramente geométrico puede quedar en CSS.

Cómo funciona: ancla, posición y relación

La forma más fácil de entenderlo es con un ejemplo pequeño. Primero se identifica el elemento que servirá como referencia:

.boton {
  anchor-name: --boton-menu;
}

Después se asocia el panel con esa referencia y se decide dónde debe aparecer:

.menu {
  position: absolute;
  position-anchor: --boton-menu;
  position-area: block-end;
}

En este caso, position-area utiliza la cuadrícula conceptual de posiciones que rodea al ancla. El estándar la describe como una cuadrícula de 3 × 3: el elemento ancla ocupa la zona central y el elemento posicionado puede colocarse en las zonas que la rodean.

También podemos trabajar directamente con los bordes del ancla mediante anchor(). Por ejemplo:

.tooltip {
  position: absolute;
  position-anchor: --boton-menu;
  top: anchor(bottom);
  left: anchor(left);
}

La función devuelve una longitud relacionada con el borde del ancla y puede combinarse con funciones como calc(). Esto permite expresar separaciones y ajustes sin medir previamente la posición del elemento con JavaScript.

La especificación también contempla anchor-size(). Su utilidad aparece cuando el tamaño del elemento dependiente debe guardar relación con el ancla. Un menú puede necesitar como mínimo el ancho de un botón, por ejemplo, sin tener que copiar ese valor manualmente. La implementación en Safari también ha avanzado: WebKit documenta la llegada de Anchor Positioning a Safari 26 y destaca su combinación con la Popover API.

La parte más útil: qué ocurre cuando no hay espacio

Posicionar un elemento junto a otro es relativamente sencillo. El problema real aparece cuando el componente está cerca del borde de la pantalla.

Un tooltip que funciona perfectamente en el centro de una página puede quedar cortado si el botón está junto al borde superior. Un menú que aparece hacia la derecha puede salir de la ventana cuando el control está cerca del lateral. Las interfaces reales necesitan resolver esas situaciones sin obligar al usuario a aceptar contenido inaccesible o parcialmente oculto.

Anchor Positioning incorpora mecanismos de fallback. Mediante position-try y las opciones de position-try-fallbacks podemos indicar posiciones alternativas. El navegador prueba esas opciones cuando la posición inicial provoca overflow.

Un ejemplo conceptual sería:

.tooltip {
  position: fixed;
  position-anchor: --boton;
  position-area: block-start;
  position-try: flip-block;
}

La idea es que el tooltip aparezca inicialmente por encima del botón y pueda cambiar al lado contrario si esa posición no cabe. También existen tácticas como flip-inline, flip-x y flip-y, además de alternativas personalizadas mediante @position-try.

Este mecanismo resulta especialmente interesante para menús, popovers y ayudas contextuales porque transforma un problema que normalmente requiere lógica de detección en una parte declarativa del layout. El navegador sigue teniendo información sobre el espacio disponible y puede aplicar la alternativa adecuada.

Anchor Positioning y Popover API trabajan bien juntos

Anchor Positioning no debe entenderse como una tecnología aislada. La especificación señala su relación con la Popover API, que permite crear elementos emergentes mediante HTML. En determinados casos, el popover puede establecer automáticamente la relación de anclaje, reduciendo todavía más la cantidad de código necesario para el posicionamiento.

Esto abre una posibilidad interesante para componentes habituales: un botón puede actuar como control y un popover como contenido asociado, mientras CSS se ocupa de la posición y de sus alternativas. La estructura sigue siendo semántica y el comportamiento de apertura y cierre puede apoyarse en las capacidades nativas del navegador.

Para el diseño de interfaces significa que podemos pensar primero en el componente y su relación espacial, y después decidir qué parte corresponde a HTML, qué parte a CSS y qué parte necesita JavaScript.

Qué cambia frente al posicionamiento absoluto tradicional

position: absolute no desaparece. Sigue siendo una herramienta fundamental. La diferencia es que Anchor Positioning amplía lo que podemos hacer cuando el elemento necesita depender de otro elemento concreto.

Con un patrón tradicional, un componente puede quedar ligado a un contenedor porque ese contenedor actúa como su bloque de posicionamiento. Si el elemento de referencia cambia de lugar dentro de la página, la relación visual puede dejar de ser la esperada.

Con Anchor Positioning, la referencia es explícita. Un elemento puede posicionarse respecto a un ancla incluso cuando la relación estructural que necesitamos no coincide exactamente con la jerarquía visual del componente.

También mejora la expresividad del CSS. Una regla como position-area: block-end comunica mejor la intención que una combinación de coordenadas y desplazamientos que solo tiene sentido después de interpretar el contexto.

Casos de uso que tienen sentido

Tooltips

Son probablemente el ejemplo más evidente. El tooltip debe permanecer asociado al control que lo activa y cambiar de posición cuando no dispone de espacio.

Menús contextuales

Un menú desplegable puede mantenerse junto al botón que lo abre sin depender de coordenadas calculadas por JavaScript. Los fallbacks permiten contemplar situaciones en las que no cabe debajo o a un lado.

Popovers y ayudas de interfaz

Los popovers pueden utilizar el ancla como referencia para conservar una relación espacial clara. Esto resulta útil en paneles de filtros, selectores, controles avanzados y pequeñas ayudas que aparecen junto a un componente.

Etiquetas y elementos flotantes

Una etiqueta que señala un elemento concreto, un indicador de estado o una pequeña tarjeta informativa pueden beneficiarse del mismo modelo. La clave es que exista una relación espacial clara y que esa relación deba mantenerse al cambiar el viewport.

Componentes reutilizables

En un sistema de diseño, expresar la relación con el ancla puede facilitar la reutilización. Un mismo patrón de tooltip puede funcionar junto a botones de tamaños diferentes sin incorporar coordenadas específicas para cada instancia.

Lo que todavía no conviene dar por resuelto

La primera precaución es la compatibilidad. En septiembre de 2026, los datos de compatibilidad muestran una situación mucho mejor que en los primeros años de la tecnología, pero todavía hay diferencias entre navegadores y entre partes de la API. Web Platform Baseline 2026 sitúa varias piezas de Anchor Positioning entre las funciones que han alcanzado disponibilidad amplia durante 2026, aunque no todas las propiedades tienen el mismo nivel de soporte. Can I Use permite comprobar el estado concreto de compatibilidad antes de desplegar una implementación.

La segunda cuestión es que una especificación y una implementación no son lo mismo. El documento de CSS Anchor Positioning del W3C sigue publicado como Working Draft. El estándar describe con precisión el modelo y sus mecanismos, pero eso no significa que cada navegador implemente cada detalle de la misma manera.

También hay que considerar el comportamiento en navegadores antiguos. Si un sitio necesita cubrir una base de usuarios amplia, la estrategia razonable es utilizar mejoras progresivas: ofrecer una posición funcional con técnicas conocidas y añadir Anchor Positioning cuando el navegador lo soporte.

Por último, no conviene utilizar la tecnología simplemente porque sea nueva. Si un componente puede resolverse de forma clara con CSS convencional, introducir más conceptos no aporta necesariamente valor. Anchor Positioning resulta especialmente útil cuando la relación entre dos elementos y el problema de overflow forman parte real del componente.

Cómo incorporarlo a un proyecto WordPress

En WordPress no hace falta que Anchor Positioning sea una función específica del CMS. Es una capacidad del navegador y puede incorporarse al tema, a un bloque personalizado o al CSS de un componente.

La forma de trabajar debería partir del diseño. Primero identifica qué elemento actúa como ancla y qué elemento depende de él. Después define la posición principal y las alternativas que deben utilizarse cuando el espacio es insuficiente. Solo después conviene decidir si el componente necesita JavaScript.

En un proyecto basado en bloques, por ejemplo, puede tener sentido encapsular este patrón en un bloque reutilizable. En un sitio construido con un tema ligero también puede resolverse con clases CSS específicas, evitando añadir una biblioteca solo para calcular posiciones.

Antes de publicarlo, prueba el componente en diferentes anchos de viewport, con zoom del navegador y con contenido más largo de lo previsto. Los componentes emergentes suelen fallar no en el caso ideal, sino cuando el texto crece, el usuario cambia el tamaño de la ventana o el elemento de referencia está cerca de un borde.

Si trabajas habitualmente con WordPress, esta forma de pensar encaja bien con una arquitectura en la que cada componente tiene una responsabilidad clara. Puedes ampliar esta cuestión con nuestra guía básica para diseñar páginas web con WordPress y con el artículo sobre estructura de una página web.

Accesibilidad y experiencia de usuario

Una posición correcta no garantiza por sí sola una interfaz accesible. Un tooltip debe seguir siendo comprensible para quien navega con teclado y el contenido emergente debe tener una relación clara con el control que lo abre. En un popover, la gestión del foco y el estado de apertura siguen siendo cuestiones de interacción, no simples problemas de geometría.

También conviene evitar que un fallback cambie la jerarquía visual de forma inesperada. Si un menú puede aparecer arriba o abajo, el diseño debe funcionar en ambas posiciones. Las animaciones, si existen, deben respetar las preferencias de movimiento del usuario. Esta cuestión conecta con la experiencia general de la interfaz, que también tratamos en nuestra guía sobre cómo optimizar la experiencia del usuario en una web.

Para comprobar el resultado, no basta con mirar una captura de escritorio. Prueba teclado, zoom, tamaños de texto diferentes y dispositivos con pantallas pequeñas. El objetivo es que el componente siga siendo utilizable cuando cambian las condiciones de presentación.

Una forma práctica de decidir si utilizarlo

Antes de aplicar Anchor Positioning, puedes hacerte cuatro preguntas:

• ¿Existe una relación espacial clara entre un elemento de referencia y otro que debe seguirlo?
• ¿El componente puede desbordarse cuando cambia el tamaño o la posición del viewport?
• ¿Necesitas varias posiciones alternativas para mantenerlo visible?
• ¿La compatibilidad de los navegadores que debes cubrir permite utilizar las propiedades que necesitas?

Si la respuesta es afirmativa en los tres primeros puntos, la tecnología merece una prueba. Si el cuarto punto no está resuelto, utiliza una estrategia progresiva y conserva un comportamiento alternativo.

Conclusión: una nueva forma de describir relaciones espaciales

CSS Anchor Positioning no convierte CSS en un sustituto de JavaScript ni elimina el posicionamiento absoluto tradicional. Su aportación es más concreta: permite declarar relaciones espaciales entre elementos y proporciona mecanismos para resolver posiciones alternativas cuando el espacio disponible cambia.

En 2026 ya existen suficientes implementaciones para empezar a incorporarlo de forma selectiva, pero conviene comprobar cada propiedad y mantener un fallback cuando el proyecto lo necesite. La tecnología resulta especialmente interesante para tooltips, menús, popovers y otros componentes que deben permanecer ligados a un control.

Para un diseñador web, la consecuencia práctica es sencilla: algunas decisiones que antes se expresaban mediante cálculos pueden empezar a describirse directamente en CSS. Eso puede producir componentes más claros y reutilizables, siempre que la compatibilidad, la accesibilidad y el comportamiento en situaciones límite formen parte del diseño desde el principio.

Si estás desarrollando o rediseñando una web y quieres que estos componentes estén integrados en una arquitectura visual coherente, el trabajo de diseño y desarrollo debe partir de esas relaciones desde la fase inicial, no como un añadido al final del proyecto.