Podcast CSS - 019: z-index e contesti di sovrapposizione
.
Supponiamo che tu abbia un paio di elementi perfettamente posizionati, e che dovrebbero essere posizionati l'uno sopra l'altro. Potresti scrivere un frammento di codice HTML in questo modo:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Per impostazione predefinita, qual è l'una sopra l'altra? Per sapere quale elemento può eseguire questa operazione, devi comprendere lo z-index e i contesti di stack.
Z-index
La z-index
imposta esplicitamente un ordine dei livelli per l'HTML in base allo spazio 3D del browser, l'asse Z.
Questo è l'asse che mostra i livelli più vicini e più lontani da te.
L'asse verticale sul web è l'asse Y, mentre l'asse orizzontale è l'asse X.
La proprietà z-index
accetta un valore numerico che può essere un numero positivo o negativo.
Gli elementi verranno visualizzati sopra un altro elemento se hanno un valore z-index
più alto.
Se non è impostato alcun z-index
nei tuoi elementi
il comportamento predefinito è che l'ordine dell'origine del documento detta l'asse Z.
Ciò significa che gli elementi più in basso nel documento si trovano sopra quelli visualizzati prima di questi ultimi.
Nel flusso normale,
Se imposti un valore specifico per z-index
e non funziona,
devi impostare il valore position
dell'elemento su un valore diverso da static
.
Questo è un luogo comune in cui le persone hanno difficoltà con z-index
.
Tuttavia, questo non è il caso se ti trovi in un contesto flexbox o griglia.
perché puoi modificare lo z-index degli elementi flessibili o griglia senza aggiungere position: relative
.
Z-index negativo
Per impostare un elemento dietro un altro elemento,
aggiungi un valore negativo per z-index
.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Se .my-element
ha il valore iniziale per z-index
di auto
,
l'elemento .child
sarà posizionato dietro.
Aggiungi il seguente CSS a .my-element
,
e l'elemento .child
non verrà posizionato dietro.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Perché ora .my-element
ha un valore position
diverso da static
e un valore z-index
diverso da auto
,
ha creato un nuovo contesto di impilamento.
Ciò significa che anche se imposti .child
in modo che un z-index
di -999
,
non sarebbe comunque dietro a .my-parent
.
Sovrapposizione di contesto
Un contesto di sovrapposizione è un gruppo di elementi che hanno un elemento padre comune e che si spostano verso l'alto e verso il basso sull'asse z insieme.
In questo esempio,
il primo elemento principale ha un valore z-index
di 1
,
pertanto viene creato un nuovo contesto di sovrapposizione.
Il suo elemento secondario ha un valore z-index
di 999
.
Accanto a questo elemento principale, c'è un altro elemento principale con un elemento secondario.
L'elemento principale ha un valore z-index
pari a 2
e anche l'elemento secondario ha un valore z-index
pari a 2
.
Poiché entrambi i genitori
creano un contesto di sovrapposizione,
il z-index
di tutti i publisher secondari si basa su quello del genitore.
Il z-index
di elementi all'interno di un contesto di sovrapposizione
sono sempre relativi all'ordine corrente dell'elemento principale nel suo contesto di sovrapposizione.
Creazione di un contesto di sovrapposizione
Non è necessario applicare z-index
e position
per creare un nuovo
contesto dello stack.
Puoi creare un nuovo contesto di sovrapposizione aggiungendo un valore per le proprietà che creano un nuovo livello composto
come opacity
, will-change
e transform
.
Puoi
consulta un elenco completo delle strutture.
Per spiegare che cos'è un livello composto, immagina una pagina web come una tela. Un browser prende i tuoi codici HTML e CSS e li utilizza per stabilire le dimensioni della tela. quindi dipinge la pagina su questa tela. Se un elemento dovesse cambiare, ad esempio cambia posizione, il browser deve poi tornare indietro e rielaborare cosa colorare.
Per migliorare il rendimento,
il browser crea nuovi livelli compositi sovrapposti al canvas.
Sono un po' come i post-it:
Spostare una foto e cambiarla
non ha un grande impatto sull'area di lavoro complessiva.
Viene creato un nuovo livello composto per gli elementi con opacity
,
transform
e will-change
perché è molto probabile che cambino,
in modo che il browser garantisca il rendimento possibile della modifica utilizzando la GPU per applicare le regolazioni di stile.
Risorse
Verifica le tue conoscenze
Verifica le tue conoscenze di z-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Quale articolo è in primo piano per impostazione predefinita?
Se z-index non funziona, quale proprietà devi controllare sull'elemento?
relative
animation
position
display
Flexbox e griglia richiedono position: relative
?