Podcast su CSS - 019: z-index e contesti di stack
Supponiamo che tu abbia un paio di elementi che sono assolutamente posizionati e che dovrebbero essere posizionati uno sopra l'altro. Potresti scrivere un codice HTML simile al seguente:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Ma quale si trova sopra l'altro, per impostazione predefinita? Per sapere quale elemento lo fa, devi conoscere i contesti z-index e di stack.
Z-index
La proprietà z-index
imposta esplicitamente un ordine dei livelli per il codice HTML in base allo spazio 3D del browser, ovvero l'asse Z.
Questo è l'asse che mostra i livelli più vicini e 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 z-index
non è impostato sugli elementi, il comportamento predefinito è che l'ordine di origine del documento determina l'asse Z.
Ciò significa che gli elementi più in basso nel documento si trovano sopra a quelli visualizzati prima.
Nel flusso normale,
se imposti un valore specifico per z-index
e questo non funziona,
devi impostare il valore position
dell'elemento su un valore diverso da static
.
Si tratta di un luogo comune in cui le persone hanno difficoltà con z-index
.
Questo non accade 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;
}
Finché .my-element
ha il valore iniziale per z-index
di auto
,
l'elemento .child
si troverà dietro.
Aggiungi il seguente CSS a .my-element
e l'elemento .child
non si troverà dietro.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Poiché ora .my-element
ha un valore position
che non è static
e un valore z-index
che non è auto
,
ha creato un nuovo contesto di stack.
Ciò significa che anche se imposti .child
in modo che abbia un z-index
di -999
,
non rimarrà indietro rispetto a .my-parent
.
Contesto di sovrapposizione
Un contesto di sovrapposizione è un gruppo di elementi con un elemento padre comune che si spostano insieme verso l'alto e verso il basso sull'asse z.
In questo esempio,
il primo elemento principale ha un valore z-index
di 1
,
quindi crea un nuovo contesto di impilamento.
Il relativo elemento secondario ha un valore z-index
di 999
.
Accanto a questo elemento principale è presente un altro elemento principale con un elemento secondario.
L'elemento principale ha z-index
(2
) e anche l'elemento secondario ha z-index
(2
).
Poiché entrambi gli elementi principali creano un contesto di impilamento,
l'z-index
di tutti gli elementi secondari si basa su quello dell'elemento padre.
Il valore z-index
degli elementi all'interno di un contesto di stack
è sempre relativo all'ordine attuale dell'elemento padre nel proprio contesto di stack.
Creazione di un contesto di stacking
Non è necessario applicare z-index
e position
per creare un nuovo
contesto di stack.
Puoi creare un nuovo contesto di stack aggiungendo un valore per le proprietà che creano un nuovo livello composito
come opacity
, will-change
e transform
.
Puoi visualizzare un elenco completo delle proprietà qui.
Per spiegare che cos'è un livello composito, immagina una pagina web come una tela. Un browser prende i tuoi file HTML e CSS e li utilizza per capire 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 gli elementi da colorare.
Per migliorare le prestazioni, il browser crea nuovi livelli compositi che vengono sovrapposti al canvas.
È un po' come i post-it:
spostare un elemento e modificarlo non ha un enorme impatto sul canvas generale.
Per gli elementi con opacity
, transform
e will-change
viene creato un nuovo livello composito perché è molto probabile che cambino; pertanto, il browser si assicura che la modifica sia il più efficace possibile utilizzando la GPU per applicare aggiustamenti dello stile.
Risorse
Verifica la tua comprensione
Verifica le tue conoscenze di z-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Quale articolo è in cima per impostazione predefinita?
Se z-index non funziona, quale proprietà devi esaminare nell'elemento?
display
relative
position
static
.animation
Flexbox e griglia hanno bisogno di position: relative
?
position: relative
.