Z-index e contesti di stack

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

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

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>