Qué es Generador CSS anchor positioning?
El posicionamiento por anclaje de CSS permite fijar un elemento a otro usando solo CSS. Asigna un anchor-name al elemento ancla y usa position-anchor en el elemento posicionado. Elimina la necesidad de bibliotecas de posicionamiento JavaScript para tooltips, desplegables y popovers. Es una caracteristica nueva de CSS compatible con Chrome 125+.
Respuesta rápida
El posicionamiento por anclaje permite adjuntar un elemento a otro elemento en la pagina usando solo CSS, sin JavaScript. Reemplaza la mayoria de los calculos manuales de posicion para tooltips, popovers y menus desplegables.
Last updated: 2026-05-25
Limitaciones
- El posicionamiento por anclaje solo es compatible con Chrome 125+. Firefox y Safari aun no lo admiten a principios de 2026.
- El elemento ancla debe ser un ancestro del DOM o estar referenciado por anchor-name. Los elementos en diferentes shadow roots pueden no funcionar.
- El posicionamiento de fallback con position-fallback es experimental y el comportamiento varia entre navegadores compatibles.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Establezca un nombre de ancla para el elemento activador usando la propiedad anchor-name.
- Elija el area de posicionamiento para el elemento anclado en relacion con el activador.
- La herramienta genera el CSS tanto para el ancla como para el elemento posicionado.
- Copie el CSS y combinelo con su HTML de activador y popover.
Para qué puedes usarla
- Posicionar un tooltip que siga a un boton o enlace.
- Crear un menu desplegable alineado con su elemento activador.
- Construir una llamada que apunte a un elemento de interfaz especifico en la pagina.