La API de Anchor Positioning de CSS resuelve uno de los problemas clásicos del diseño web: anclar un elemento flotante —como un tooltip o un menú desplegable— a otro de referencia, gestionando automáticamente los desbordamientos y los cambios de posición. Frente al histórico uso de JavaScript, esta API nativa del navegador aporta una solución declarativa.
El modelo se basa en dos elementos: el ancla, al que se asigna un nombre único con la propiedad anchor-name, y el objetivo, que se vincula a ese ancla con position-anchor. La ubicación del objetivo respecto al ancla se controla con position-area, que opera sobre una rejilla 3×3 imaginaria en el bloque contenedor; valores como top, bottom o top center definen la celda donde se coloca el elemento, con la opción span-all para abarcar toda la fila o columna. Para añadir separación se recurre a margin, ya que no existe una propiedad de tipo gap específica.
La mayor ventaja de la API es su comportamiento dinámico: si el objetivo no cabe en la posición elegida porque se sale del viewport, el navegador evalúa automáticamente las alternativas definidas en position-try-fallbacks y aplica la primera que se ajuste. Esto evita cálculos manuales de coordenadas y recortes visibles.
Para resolver detalles cosméticos, como invertir un caret cuando el tooltip cambia de lado, se incorpora un nuevo tipo de container query asociado al ancla, que permite aplicar estilos según la posición de fallback activa. Esta función está disponible en navegadores Chromium y forma parte de los objetivos de Interop 2026, por lo que se espera su llegada al resto de motores a lo largo del año.