Cos'è la proprietà z-indice in CSS?

Cascading Style Sheets (CSS) fornisce un'enorme gamma di proprietà che specificano come gli elementi HTML appariranno su pagine Web, ad esempio la proprietà visualizzata definisce il comportamento di visualizzazione degli elementi, la proprietà di posizione specifica la posizione degli elementi, la proprietà in background fornisce uno sfondo in background colore agli elementi e l'elenco continua. Questo articolo è appositamente progettato per enfatizzare il significato della proprietà Z-indice in CSS.

In HTML, gli elementi hanno un certo ordine di impilamento che specifica la disposizione in cui sono posizionati elementi. La regola definita per il posizionamento dell'elemento è che l'elemento che ha un ordine di impilamento più elevato è posizionato davanti all'elemento con ordine di impilamento inferiore. Un ordine dello stack di un elemento può mostrare valori sia positivi che negativi.

Cos'è la proprietà z-indice in CSS

La proprietà Z-Index definisce l'ordine dello stack degli elementi HTML in modo da specificare quale elemento verrà visualizzato davanti e quale elemento viene visualizzato nello sfondo.

Sintassi

Z-INDEX: valore;

La proprietà z-indice può esibire alcune proprietà spiegate in dettaglio di seguito.

Valore	Descrizione
auto	Questo valore imposta l'ordine dello stack di elementi uguale a quello dei loro elementi genitori.
numero	Questo valore viene utilizzato per dare manualmente un ordine dello stack a un elemento. L'ordine dello stack può mostrare valori sia positivi che negativi.
iniziale	Questo valore imposta l'ordine dello stack di un elemento sul suo valore predefinito.
ereditare	Questo valore imposta l'ordine dello stack di un elemento in base alle proprietà che l'elemento ha ereditato dal suo elemento genitore.

Qui abbiamo illustrato la proprietà z-indice con l'aiuto di alcuni esempi.

Esempio 1

Supponiamo di voler fornire un'immagine di sfondo sul tuo sito Web e vuoi che gli altri elementi vengano visualizzati davanti a quell'immagine. Utilizzare il seguente frammento di codice.

Html

La passeggiata mattutina è vantaggiosa per la salute

Nell'esempio sopra, ci sono due elementi uno è un

elemento e l'altro è un elemento.

CSS

H2
Posizione: relativo;
A sinistra: 200px;
Top: 0px;

img
Z -INDEX: -1;
Posizione: assoluto;
A sinistra: 200px;
Top: 0px;

L'elemento è posizionato sullo sfondo del

elemento perché la proprietà z -indice assegnata all'elemento è -1. Inoltre, il

L'elemento è relativamente posizionato 200px da sinistra e 0px dall'alto, mentre l'elemento ha una posizione assoluta, il che significa che verrà posizionato 200px da sinistra e 0px dall'alto, rispetto alla posizione del suo elemento antena .

Produzione

Ecco un output dell'esempio sopra.

Entrambi gli elementi sono impilati con successo.

Ora se rimuoviamo il valore z-indice dall'elemento, allora verrà posizionato davanti al

elemento perché è definito ultimo nel flusso del documento.

img
/*Z -INDEX: -1;*/
Posizione: assoluto;
A sinistra: 200px;
Top: 0px;

Produzione

Ora il

L'elemento è posizionato dietro l'elemento.

Esempio 2

In questo esempio abbiamo dimostrato l'uso del valore positivo dell'indice z, inoltre, in questo esempio abbiamo illustrato come posizionare un elemento dietro un determinato elemento. Qui vengono creati due elementi.

Html

Div 1
Div 2

Il primo div ha una posizione relativa, il che significa che sarà posizionato 20px da sinistra e 10px dalla parte superiore rispetto alla sua posizione originale, inoltre, gli abbiamo assegnato un valore z-indice di 1.

.Div1
Z-INDEX: 1;
Posizione: relativo;
A sinistra: 20px;
Top: 10px;
bordo: 3px grigio solido;
Altezza: 100px;
larghezza: 300px;

Per il secondo div abbiamo assegnato una posizione assoluta, il che significa che verrà posizionato 100px da sinistra e 60 px dall'alto rispetto alla posizione del suo elemento genitore.

.Div2
Posizione: assoluto;
A sinistra: 100px;
Top: 60px;
Background-color: Indianred;
Altezza: 80px;
larghezza: 200px;

Produzione

Div 2 impilato con successo dietro Div 1.

Punti da ricordare!

1. È necessario definire la posizione degli elementi o altrimenti la proprietà z-indice non funzionerà. (Gli elementi possono avere posizioni assolute, relative, fisse o appiccicose).

2. Senza specificare la proprietà z-indice, se due elementi si abbassano l'uno sull'altro, allora l'elemento definito ultimo nel flusso del documento è posizionato di fronte all'altro elemento.

Conclusione

La proprietà Z-Index viene utilizzata per impostare l'ordine di impilamento degli elementi HTML, il che significa che specifica la disposizione degli elementi visualizzati nella pagina Web. La proprietà z-indice mostra quattro valori che sono; Auto che imposta l'ordine dello stack di elementi uguale a quello dei loro elementi principali, il numero viene utilizzato per dare manualmente un ordine dello stack a un elemento, iniziale imposta l'ordine dello stack di un elemento sul suo valore predefinito e eredità imposta l'ordine dello stack elemento secondo le proprietà che l'elemento ha ereditato dal suo elemento genitore. Questo post discute in modo approfondito la proprietà z-indice con l'aiuto di esempi adeguati.