Perché l'indice Z non funziona

Il CSS "Z-INDEX"Determina l'ordine di impilamento dell'elemento HTML. Man mano che il suo valore aumenta, verrà posizionato davanti ad altri elementi. Per impostazione predefinita, ogni elemento nella pagina Web ha una posizione definita staticamente. Tuttavia, "Z-Index" funziona solo sugli elementi posizionati.

Questo articolo ti guiderà attraverso la possibile soluzione al problema di non funzionamento del indice z:

• Impostazione della posizione dell'elemento.
• Gli elementi con lo stesso valore z-indice si accumuleranno in ordine di aspetto.
• Impostazione del livello di impilamento dell'elemento figlio rispetto al suo genitore.

Prerequisito: crea una pagina HTML

Nell'HTML, fare quattro ""Contenitori. Innanzitutto, aggiungi un tag "" e assegna la classe "Main-1"Ad esso. All'interno di questo, aggiungi tre bambini "" elementi con lezioni "sub-main-1","sub-main-2", E "sub-main-3":

genitore
1
2
3

In CSS, modella gli elementi "" per cambiare le loro forme.

Classe "Main-1" di stile

.main-1
larghezza: 150px;
Altezza: 150px;
Background-color: bisque;
Margine: 50px Auto;
Posizione: relativo;

Qui:

• "larghezza"Determina l'ampiezza dell'elemento.
• "altezza"Imposta l'altezza dell'elemento.
• "colore di sfondo"Applica il colore di sfondo dell'elemento.
• "margine"Aggiunge spazio attorno all'elemento.
• "posizione"Con il valore"parente"Posiziona l'elemento rispetto alla sua posizione attuale.

Stile Classe "Sub-Main-1"

IL "sub-main-1"La classe è disegnata con le seguenti proprietà per creare una casella 1:

.sub-main-1
larghezza: 150px;
Altezza: 150px;
Background-color: CadetBlue;
Posizione: assoluto;
Top: 30px;
A sinistra: 20px;

Qui:

• "posizione"Con il valore"assoluto"Posiziona l'elemento secondo il suo elemento posizionato per genitore.
• "superiore" E "Sinistra"Sono utilizzati per aggiungere spazio nella parte superiore dell'elemento e sinistra.

Classe "sub-main-2" di stile

Per la scatola 2, vengono applicati i seguenti stili:

.sub-main-2
larghezza: 150px;
Altezza: 150px;
Background-color: RGB (223, 134, 186);
Posizione: assoluto;
Top: 60px;
A sinistra: 50px;

Stile Classe "Sub-Main-3"

Le seguenti proprietà CSS vengono applicate per creare la casella 3:

.sub-main-3
larghezza: 150px;
Altezza: 150px;
Background-color: RGB (210, 243, 186);
Posizione: assoluto;
Top: 90px;
A sinistra: 80px;

Le quattro scatole sono state create con successo e sono in ordine di impilamento naturale:

Impostazione della posizione dell'elemento

La cosa importante da considerare è che il "Z-INDEX"La proprietà funziona solo con elementi posizionati. Aggiungi la proprietà "Z-Index" con qualsiasi valore, come "1". Quindi, se rimuoviamo il "posizione"Proprietà da"sub-main-2"Classe, la"Z-INDEX"La proprietà non funzionerà:

Gli elementi con lo stesso valore z-indice si accumuleranno in ordine di aspetto

Se tutti gli elementi sono regolati con lo stesso "Z-INDEX"Valore, tutti si accumuleranno nel loro ordine di aspetto. Pertanto, aumenta il valore della proprietà "Z-indice" dell'elemento che si desidera visualizzare davanti a tutti.

Implessiamolo con l'aiuto di un esempio:

Genitore 1
bambino 1
bambino 2

In CSS, assegnare ogni classe con la proprietà "Z-Index" con il valore "1". La pagina web sarà così:

Impostazione del livello di impilamento dell'elemento figlio rispetto al suo genitore

I figli dell'elemento genitore si stacca rispetto al suo elemento genitore. Non influenzeranno l'ordine di impilamento dell'altro elemento di fratello.

Per una buona comprensione, analizza l'esempio di seguito.

Crea un file HTML

• Innanzitutto, aggiungi un ""Elemento per il genitore 1 e assegnarlo una classe"Main-1".
• All'interno di questo, aggiungi elementi "" per i suoi figli Child 1, Child 2 e Modal Layer.
• Alla fine, aggiungi un elemento "" per il genitore 2:

Genitore 1
bambino 1
bambino 2


Genitore 2

Impostare il "Main-1" classe "Z-INDEX"Valore come"2":

Z-INDEX: 2;

Classe "Child-Modal" di stile

.Child-Modal
Posizione: fissa;
Top: 0px;
A sinistra: 0px;
larghezza: 100%;
Altezza: 100VH;
Z-INDEX: 100;
Background-color: RGBA (0, 0, 0, 0.295);

IL "infantile-modale"Class's"Z-INDEXIl valore "è impostato come"100", Il che significa che deve essere di fronte ai suoi elementi di fratello.

Impostare il "Z-INDEX"Valore del"sub-main-2" classe "5":

Z-INDEX: 5;

Impostare il "Z-INDEX"Valore del"Main-2" classe "3":

Z-INDEX: 3;

Possiamo osservare dall'immagine qui sotto che il fratello "Main-2"Dell'elemento genitore è di fronte a"Main-1"Genitore sebbene uno degli elementi figlio abbia un maggiore"Z-INDEX" valore. Questo perché la classe "Main-1" genitore ha il valore di proprietà "Z-Index" "2" e "Main-2" ha un valore "Z-Index" "3":

Questi sono i motivi per cui l'indice z non funziona.

Conclusione

IL "Z-INDEX"La proprietà lavora sugli elementi posizionati, come gli elementi con"posizione" proprietà "assoluto","fisso", o più. Se il valore "Z-Index" dell'elemento genitore è inferiore al suo elemento di fratelli e il figlio dell'ex elemento genitore ha un valore "Z-indice" maggiore, l'elemento genitore tra fratelli visualizzerà davanti a tutti. Questo articolo ha discusso della proprietà "Z-Index" e perché non funziona.