Aprende a usar `anchor-name`, `position-anchor` y `anchor()` para colocar tooltips, popovers y ayudas contextuales respecto a otro elemento con mucho menos pegamento manual.
Muchos overlays de interfaz no son complejos por diseño, sino por coordenadas: medir botones, compensar scroll, recalcular al cambiar el layout y pelear con wrappers auxiliares.
CSS Anchor Positioning propone un modelo más directo. Un elemento declara un nombre de ancla y otro puede alinearse a sus bordes o centro sin pasar por `getBoundingClientRect()` en cada interacción.
Es una capacidad moderna y todavía desigual en compatibilidad, así que además de aprender la sintaxis conviene aprender el enfoque correcto de fallback.
Piensa menos en píxeles absolutos y más en relaciones entre elementos.
Con `anchor-name` nombras el elemento de referencia. Con `position-anchor` dices a qué ancla responde el overlay. Y con funciones como `anchor(bottom)` o `anchor(center)` pides coordenadas derivadas de esa relación.
El resultado es especialmente útil en tooltips, ayudas de formulario, popovers contextuales y menús que deben seguir a un trigger aunque el layout cambie.
El ejemplo clásico sirve muy bien para interiorizar la sintaxis.
No sustituye todas las técnicas de posicionamiento, pero sí alivia las más frágiles.
Aquí la lección importante no es 'usar lo nuevo', sino no atar la UI a soporte perfecto.
Si el overlay es secundario, puedes dejarlo sin mejora o mostrarlo en una posición base. Si es crítico, prepara un fallback con `relative + absolute` o una medición puntual con JavaScript.
La clave profesional está en no duplicar toda la interfaz por entusiasmo. Primero resuelve la versión robusta; después deja que el navegador moderno simplifique el camino.
Aprende a usar `anchor-name`, `position-anchor` y `anchor()` para colocar tooltips, popovers y ayudas contextuales respecto a otro elemento con mucho menos pegamento manual.
Código del tema: position-anchor: --trigger;
Piensa menos en píxeles absolutos y más en relaciones entre elementos.
Con `anchor-name` nombras el elemento de referencia. Con `position-anchor` dices a qué ancla responde el overlay. Y con funciones como `anchor(bottom)` o `anchor(center)` pides coordenadas derivadas de esa relación.
El resultado es especialmente útil en tooltips, ayudas de formulario, popovers contextuales y menús que deben seguir a un trigger aunque el layout cambie.
El ejemplo clásico sirve muy bien para interiorizar la sintaxis.
.button {
anchor-name: --help-button;
}
.tooltip {
position: absolute;
position-anchor: --help-button;
top: anchor(bottom);
left: anchor(center);
transform: translateX(-50%);
}No sustituye todas las técnicas de posicionamiento, pero sí alivia las más frágiles.
La relación visual ya existe: el contenido debe aparecer junto al elemento que lo invoca.
Estados de filtros, información contextual o confirmaciones rápidas ganan limpieza sin cálculos manuales.
La lógica de posición deja de depender tanto del entorno concreto y vive mejor dentro del propio componente.
Aquí la lección importante no es 'usar lo nuevo', sino no atar la UI a soporte perfecto.
Si el overlay es secundario, puedes dejarlo sin mejora o mostrarlo en una posición base. Si es crítico, prepara un fallback con `relative + absolute` o una medición puntual con JavaScript.
La clave profesional está en no duplicar toda la interfaz por entusiasmo. Primero resuelve la versión robusta; después deja que el navegador moderno simplifique el camino.