Gestione dell'Ordine di Sovrapposizione degli Elementi
La proprietà z-index
determina l'ordine di sovrapposizione degli elementi posizionati su una pagina web. Si applica solo agli elementi posizionati, ovvero quelli con un valore di posizione absolute
, fixed
, relative
o sticky
. Poiché questi elementi vengono rimossi dal normale flusso del documento, per stabilire quale di essi debba essere visualizzato sopra o sotto, si specifica il valore di z-index
.
z-index: number_without_units
Maggiore è il valore della proprietà z-index
, più in alto l'elemento viene mostrato sullo schermo dell'utente.
Esercizio pratico. Sono presenti quattro elementi div
con la classe box
, ciascuno stilizzato come un quadrato e numerato per rappresentare il loro ordine nel documento html
. I quadrati sono attualmente sovrapposti. L'obiettivo è regolare la proprietà z-index con i valori corretti per portare il quadrato 3 in primo piano e inviare il quadrato 4 sullo sfondo.
index.html
index.css
Nota
Se impostiamo lo stesso valore per la proprietà
z-index
su elementi diversi, il browser mostrerà gli elementi nell'ordine in cui compaiono nel filehtml
.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
How do I set the z-index values to bring square 3 to the front and square 4 to the back?
Can you explain what happens if two elements have the same z-index value?
Can you show an example of how the z-index property is used in CSS?
Awesome!
Completion rate improved to 2.04
Gestione dell'Ordine di Sovrapposizione degli Elementi
Scorri per mostrare il menu
La proprietà z-index
determina l'ordine di sovrapposizione degli elementi posizionati su una pagina web. Si applica solo agli elementi posizionati, ovvero quelli con un valore di posizione absolute
, fixed
, relative
o sticky
. Poiché questi elementi vengono rimossi dal normale flusso del documento, per stabilire quale di essi debba essere visualizzato sopra o sotto, si specifica il valore di z-index
.
z-index: number_without_units
Maggiore è il valore della proprietà z-index
, più in alto l'elemento viene mostrato sullo schermo dell'utente.
Esercizio pratico. Sono presenti quattro elementi div
con la classe box
, ciascuno stilizzato come un quadrato e numerato per rappresentare il loro ordine nel documento html
. I quadrati sono attualmente sovrapposti. L'obiettivo è regolare la proprietà z-index con i valori corretti per portare il quadrato 3 in primo piano e inviare il quadrato 4 sullo sfondo.
index.html
index.css
Nota
Se impostiamo lo stesso valore per la proprietà
z-index
su elementi diversi, il browser mostrerà gli elementi nell'ordine in cui compaiono nel filehtml
.
Grazie per i tuoi commenti!