0Pricing
CSS Academy · Lezione

Z-index e contesto di sovrapposizione

Controllate quali elementi vengono visualizzati in primo piano utilizzando z-index e comprendete i contesti di sovrapposizione.

Z-index e contesto di sovrapposizione è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è z-index?

z-index controlla l'ordine di impilamento degli elementi posizionati lungo l'asse Z, dalla parte anteriore a quella posteriore. Quando gli elementi si sovrappongono, i valori più alti vengono visualizzati sopra quelli più bassi.

z-index funziona solo sugli elementi posizionati

z-index non ha effetto sugli elementi con position: static (il valore predefinito). È necessario utilizzare relative, absolute, fixed o sticky affinché z-index venga applicato.

<div class="popup">Popup (position + z-index)</div>

Ordine di impilamento predefinito

In assenza di uno z-index esplicito, gli elementi vengono impilati nel seguente ordine (dal fondo verso la parte anteriore):

  1. Sfondo dell'elemento radice
  2. Elementi a livello di blocco (nell'ordine del flusso)
  3. Elementi flottanti
  4. Elementi in linea
  5. Elementi posizionati con z-index: auto o 0

Contesto di impilamento

Un contesto di impilamento è un livello di elementi con un asse z comune. I valori di z-index entrano in competizione solo all'interno dello stesso contesto di impilamento. Un elemento all'interno di un contesto di impilamento non può essere posizionato sopra elementi esterni a tale contesto, indipendentemente dal valore di z-index.

Che cosa crea un contesto di impilamento?

Un nuovo contesto di impilamento viene creato da:

  • position + z-index diverso da auto
  • opacity inferiore a 1
  • transform, filter o perspective applicati
  • will-change su proprietà specifiche
  • isolation: isolate
  • Elementi figli flex/grid con z-index

Isolamento del contesto di impilamento

Utilizzi isolation: isolate per creare intenzionalmente un contesto di impilamento senza effetti visivi. È utile per i componenti dell'interfaccia che devono contenere i propri livelli z-index.

<div class="modal-wrapper">Isolated stacking context</div>

Il problema della scala di z-index

Nei progetti si verificano spesso le cosiddette "guerre dello z-index", in cui gli sviluppatori aumentano continuamente i valori fino a 9999 o 99999. Risolva il problema utilizzando una scala di z-index con nomi definiti tramite variabili CSS:

<p>Custom properties define a z-index scale used across the app.</p>

z-index negativo

I valori negativi di z-index posizionano gli elementi dietro lo sfondo del blocco contenitore. È possibile utilizzarli per i livelli decorativi degli pseudo-elementi, posizionati dietro il contenuto.

<div class="card">Card with a decorative gradient layer behind it</div>

Debug dei problemi di impilamento

Quando una modale o un tooltip appare dietro un altro elemento, la causa è generalmente un contesto di impilamento su un antenato con uno z-index basso. Utilizzi la 3D View degli Strumenti per sviluppatori oppure controlli opacity, transform e filter sugli elementi genitori.

z-index in Flex e Grid

Gli elementi flex e grid possono utilizzare z-index direttamente, senza impostare esplicitamente position. Il browser li considera posizionati ai fini dell'impilamento.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Modali fisse e z-index

Le modali dovrebbero essere figlie dirette di <body> (o di un wrapper di primo livello) per uscire dai contesti di impilamento degli antenati. L'elemento HTML <dialog> gestisce questo comportamento in modo nativo nel livello superiore del browser.

Verifica rapida

Due elementi sovrapposti hanno entrambi z-index: 100, ma appartengono a contesti di impilamento genitori diversi. Che cosa determina quale dei due appare sopra?

Riepilogo

z-index controlla l'impilamento fronte-retro degli elementi posizionati. I contesti di impilamento isolano la competizione tra i valori di z-index. Qualsiasi elemento che crea un contesto di impilamento su un genitore può confinare i valori di z-index dei figli. Utilizzi isolation: isolate per creare confini espliciti e variabili CSS per definire una scala di z-index.

Domande Frequenti

La lezione «Z-index e contesto di sovrapposizione» è gratuita?

Sì — il testo completo di «Z-index e contesto di sovrapposizione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Z-index e contesto di sovrapposizione»?

Controllate quali elementi vengono visualizzati in primo piano utilizzando z-index e comprendete i contesti di sovrapposizione. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Z-index e contesto di sovrapposizione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Posizionamento statico e relativo
  2. Posizionamento assoluto e containing block
  3. Posizionamento fixed e sticky
  4. Z-index e contesto di sovrapposizione
← Torna a CSS Academy