Z-index e contesti di stack

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

• Forzare i livelli
• Guida alle animazioni: Forzare la creazione di livelli
• Informazioni su z-index

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>