CSS Anchor Positioning 2026: guia practica para tooltips, menus y overlays

Posicionar UI contextual siempre ha sido una fuente de bugs. Dropdowns, tooltips y popovers suelen depender de calculos JS, chequeos de viewport y logica custom para evitar colisiones.

Por que importa

• menus cortados en pantallas pequeñas
• tooltips que se separan del trigger al hacer scroll
• overlays fuera de pantalla en interfaces localizadas o RTL

Modelo mental

Eso reduce JS innecesario y vuelve el componente mas estandarizable.

Casos reales

• menu de acciones en tablas
• dropdown de perfil en header sticky
• tooltip inline en formularios
• controles contextuales en CMS

Reglas de UX

• overlay cerca del trigger
• foco de teclado claro
• cierre predecible
• sin animaciones pesadas al recolocar

Despliegue gradual

Empieza por una familia:

Luego valida tamaños, zoom, RTL, touch y teclado.

Conclusion

Anchor Positioning no es un juguete nuevo de CSS. Es una mejora estructural para reducir fragilidad en componentes reales.