03 · Anchor
Anchor
Popovers que no se salen de la pantalla
anchor-name: --a1
Vinculado al botón. Si no entra abajo-derecha, el navegador prueba position-try automáticamente.
Vinculado al botón. Si no entra abajo-derecha, el navegador prueba position-try automáticamente.
position-try-fallbacks
Lista: bottom span-right → bottom span-left → top span-right → top span-left
Hover / focus para ver el popover · Probá cerca del bordeLista: bottom span-right → bottom span-left → top span-right → top span-left
Tu navegador aún no soporta anchor positioning: el popover igualmente se muestra con posicionamiento clásico.
/* el botón se registra como anchor */
.anchor {
anchor-name: --a1;
}
/* el popover se posiciona relativo al anchor */
.popover {
position-anchor: --a1;
position-area: bottom span-right;
/* si no entra, prueba estas posiciones en orden */
position-try-fallbacks:
bottom span-left,
top span-right,
top span-left;
}Nota honesta sobre soporte
Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.