03 · Anchor
Anchor
Popovers that don't go off-screen
anchor-name: --a1
Linked to the button. If it doesn't fit bottom-right, the browser tries position-try automatically.
Linked to the button. If it doesn't fit bottom-right, the browser tries position-try automatically.
position-try-fallbacks
List: bottom span-right → bottom span-left → top span-right → top span-left
Hover / focus to see the popover · Try near the edgeList: bottom span-right → bottom span-left → top span-right → top span-left
Your browser doesn't support anchor positioning yet: the popover still shows with classic positioning.
/* 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;
}An honest note on support
Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".