Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Gestione dell'Ordine di Sovrapposizione degli Elementi | Padronanza del Posizionamento CSS
Tecniche CSS Avanzate

bookGestione 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.html

index.css

index.css

copy

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 file html.

question mark

Qual è lo scopo della proprietà z-index?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 10

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

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

bookGestione 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.html

index.css

index.css

copy

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 file html.

question mark

Qual è lo scopo della proprietà z-index?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 10
some-alt