CSS anchor positioning: qué hace y por qué MDN sigue diciendo disponibilidad limitada

El posicionamiento por anclaje en CSS permite atar un elemento posicionado en absoluto a otro elemento, de modo que un tooltip siga a su botón sin una línea de JavaScript. Es realmente elegante. También es, según el propio banner de MDN, algo que todavía no puedes publicar sin condiciones - y buena parte de lo escrito en 2026 afirma lo contrario.

Las tres piezas

El modelo es pequeño. Nombras un elemento como ancla, apuntas otro elemento a ese nombre y posicionas respecto a él.

.trigger {
  anchor-name: --my-trigger;
}

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

anchor-name registra el elemento bajo un identificador personalizado. position-anchor asocia el elemento posicionado con ese identificador. La función anchor() se resuelve entonces en un borde del ancla: anchor(bottom) es el borde inferior del ancla expresado en el espacio de coordenadas del elemento posicionado.

Lo que lo convierte en algo más que azúcar sintáctico es lo que ocurre cerca del borde de la ventana. Un tooltip fijado debajo de su disparador debería voltearse hacia arriba en lugar de quedar recortado, y ese volteo es exactamente la lógica por la que existen todas las librerías de posicionamiento. El anclaje la ofrece de forma declarativa mediante posiciones de reserva: enumeras colocaciones alternativas y el navegador elige la primera que cabe.

Por qué el entusiasmo se adelantó al soporte

Chrome incorporó el anclaje en 2024, y siguió una oleada de artículos anunciando que el CSS nativo había reemplazado a las librerías de tooltips. Busca el tema en 2026 y encontrarás afirmaciones de estatus Baseline y porcentajes de cobertura por encima del noventa.

La página de MDN para position-anchor lleva actualmente otro banner: disponibilidad limitada, con la explicación de que esta característica no es Baseline porque no funciona en algunos de los navegadores más usados. Esa es la documentación de referencia de la propiedad en sí, y es la línea en la que confiar cuando las fuentes secundarias la contradicen.

No es motivo para ignorar la característica. Es motivo para comprobar tú mismo el banner en MDN el día que pienses publicar, en vez de heredar una afirmación de un artículo que era optimista cuando se escribió.

Cómo usarlo sin apostar por ello

Consúltalo con una feature query. @supports es la diferencia entre mejora progresiva y una maquetación rota para quien esté en el motor equivocado:

.tooltip {
  /* colocación de reserva que funciona en todas partes */
  position: absolute;
  top: 100%;
  left: 0;
}

@supports (anchor-name: --x) {
  .trigger { anchor-name: --my-trigger; }
  .tooltip {
    position-anchor: --my-trigger;
    top: anchor(bottom);
    left: anchor(left);
  }
}

Escribe primero el posicionamiento corriente y deja que la versión anclada lo sobrescriba dentro de la consulta. Los navegadores que entienden el anclaje obtienen el buen comportamiento; los demás obtienen algo que sigue funcionando.

El resumen honesto de dónde te deja esto: el anclaje va en la dirección correcta y merece aprenderse ya, pero un tooltip en producción en 2026 todavía necesita una vía para los motores que no lo soportan. Borrar la librería sin más es una decisión que se toma desde la tabla de compatibilidad, no desde un titular.

Dónde encaja con el resto de la plataforma

El anclaje se combina de forma natural con la API Popover, que se encarga de mostrar y descartar mientras el anclaje se encarga de la colocación, y con el elemento dialog para los casos que exigen un modal de verdad. Esos dos van más avanzados en soporte, que es parte de por qué conviene recurrir antes a ellos.

En resumen

anchor-name marca el ancla, position-anchor se conecta a ella, anchor() resuelve sus bordes y las posiciones de reserva gestionan el volteo cerca de un borde de la ventana. MDN lista la propiedad como de disponibilidad limitada y explícitamente fuera de Baseline. Úsala tras @supports, mantén un fallback corriente y consulta la tabla de compatibilidad el día que publiques en lugar de fiarte de un porcentaje de un blog.