Introduzione al CSS Anchor Positioning in Chrome 125

Con l’introduzione della CSS Anchor Position API in Chrome 125, non è mai stato così facile posizionare un elemento rispetto a un altro elemento. Questo è un ottimo modo per gestire casi complessi di posizionamento come i popover e i tooltip. Tuttavia, il posizionamento degli ancoraggi CSS può essere utilizzato per molto più di semplici popover e tooltip, può essere utilizzato per creare diagrammi di flusso di base.

Posizionamento di base: Il posizionamento degli ancoraggi CSS è un ottimo modo per posizionare un elemento rispetto a un altro elemento. Per creare il nostro primo elemento ancorato, dobbiamo fornire un nome al div “one” in modo da poterlo fare riferimento. I nomi degli ancoraggi devono essere unici e iniziare con due trattini (–). Per esempio:

.one {
 anchor-name : --anchor-one ; 
}

Successivamente, dobbiamo fornire il posizionamento dell’ancoraggio per il div “two”. Utilizzeremo anchor(–anchor-one top) per posizionare il div “two” rispetto alla parte superiore del div “one”:

.two {
 position-anchor : --anchor-one ; 
 bottom : anchor ( --anchor-one top ) ; 
 justify-self : anchor-center ; 
}

Per assegnare la posizione inferiore del div “two” alla parte superiore del div “one” utilizzando anchor(–anchor-one top). Possiamo posizionare qualsiasi lato di un div rispetto a qualsiasi lato di un altro div usando la stessa sintassi (top, left, bottom, right).

Ancoraggi multipli: Con il posizionamento degli ancoraggi CSS possiamo ancorare un elemento a due altri elementi contemporaneamente. Per esempio, possiamo dare un nome di ancoraggio al div “two” per essere referenziato da un nuovo terzo div:

.one {
 anchor-name : --anchor-one ; 
}

.two {
 anchor-name : --anchor-two ; 
}

Il terzo div può ora fare riferimento agli ancoraggi di uno e due per il posizionamento.