Il positioning in CSS oggi è (quasi) banale: popover, anchor e size che si allineano da soli

Negli ultimi anni abbiamo visto il CSS diventare sempre più “layout-first”: meno workaround, meno misure a mano, più dichiaratività. Un esempio perfetto è il classico problema del dropdown (o menu contestuale) ancorato a un bottone.

Tradizionalmente, tra position: absolute, wrapper con position: relative, calcolo di offset e gestione della larghezza, bastava poco per finire con un componente fragile. Con i Popover e le nuove possibilità di anchor positioning, l’esperienza è molto più lineare.

Un popover si ancora già da solo

Quando usi un elemento configurato come popover, l’ancoraggio al trigger è spesso il comportamento più naturale: il popover “sa” qual è l’elemento che lo ha aperto e può usarlo come riferimento.

Questo elimina un passaggio comune: definire manualmente un elemento “anchor” o costruire una gerarchia di contenitori solo per dare un contesto di posizionamento.

Posizionare il menu sotto al bottone: top/bottom e left

L’obiettivo tipico è:

• il menu deve comparire sotto il bottone
• il bordo sinistro del menu deve essere allineato al bordo sinistro del bottone
• ci deve essere un piccolo gap tra i due

Con il CSS moderno puoi descriverlo in modo diretto:

• top agganciato al bottom dell’anchor
• left agganciato al left dell’anchor
• un margin-top (o equivalente logico) per creare spazio

In alcuni casi troverai esempi che includono position: absolute e/o override come inset: auto per “ripulire” valori di default. Spesso non è nemmeno strettamente necessario, ma può aiutare a rendere esplicito il comportamento quando stai integrando il popover in una base CSS esistente.

La ciliegina: far combaciare la larghezza con anchor-size()

Il dettaglio che rende il tutto davvero comodo è la possibilità di legare anche la dimensione del popover a quella dell’elemento di trigger.

Per un dropdown, una richiesta comune è: “il menu deve essere largo quanto il bottone”.

Qui entra in gioco anchor-size(width), che ti permette di impostare, ad esempio:

• width: anchor-size(width)

Così il popover segue automaticamente la larghezza del suo anchor, senza dover replicare regole o usare JS.

Attenzione a box-sizing

Se assegni una larghezza “ancorata” e poi aggiungi padding e bordi, potresti notare che il popover risulta visivamente più largo del previsto. È il classico effetto del box model.

Per evitare sorprese, su quel componente conviene impostare:

• box-sizing: border-box;

In questo modo padding e bordi rientrano nella larghezza calcolata.

Un piccolo hardening: meglio min-width che width

In molti casi è più robusto usare:

• min-width: anchor-size(width)

Perché?

• garantisci almeno la larghezza del bottone
• lasci al contenuto la possibilità di espandersi (ad esempio voci lunghe nel menu)

Usa proprietà logiche quando ha senso

Se stai lavorando a un design internazionale o vuoi componenti più “future-proof”, valuta di tradurre gli allineamenti in proprietà logiche (ad esempio usando concetti equivalenti a start/end invece di left/right, e block/inline invece di top/bottom). Il principio rimane identico, ma il componente diventa più adattabile.

Sintesi operativa

Per un dropdown moderno e solido:

1. sfrutta il popover, che spesso si ancora automaticamente al trigger;
2. allinea posizione con valori ancorati (sotto e a sinistra/start del bottone);
3. crea un gap con un margine (meglio se logico);
4. fai combaciare la larghezza con anchor-size(width) (o meglio min-width);
5. imposta box-sizing: border-box sul popover per evitare overflow dovuti al padding.

Il risultato è un componente più semplice, più leggibile e meno fragile: il posizionamento diventa finalmente una dichiarazione d’intenti, non un esercizio di incastri.