Hvorfor fungerer ikke z-indeks

CSS “Z-indeks”Bestemmer HTML -elementets stablingsrekkefølge. Når verdien stiger, vil den bli plassert foran andre elementer. Som standard har hvert element på websiden en statisk definert stilling. Imidlertid fungerer "z-indeksen" bare på de plasserte elementene.

Denne oppskrivningen vil guide deg gjennom den mulige løsningen på Z-Index som ikke fungerer

• Angi elementets posisjon.
• Elementer med samme z-indeksverdi vil stable i rekkefølge etter utseende.
• Sette stablingsnivået til barnelementet i forhold til foreldrene.

Forutsetning: Opprett en HTML -side

I HTML, lag fire “”Containere. Først legger du til en "" -kode og tildeler klassen "Main-1”Til det. Inne i dette, legg til tre barn “” elementer som har klasser ”Sub-Main-1”,“Sub-Main-2”, Og“Sub-Main-3”:

foreldre
1
2
3

I CSS, stil “" elementene for å endre formene sine.

Stil “main-1” -klasse

.main-1
Bredde: 150px;
Høyde: 150px;
Bakgrunnsfarge: Bisque;
Margin: 50px auto;
Posisjon: relativ;

Her:

• “bredde”Bestemmer elementets bredde.
• “høyde”Setter elementets høyde.
• “bakgrunnsfarge”Bruker elementets bakgrunnsfarge.
• “margin”Legger til plass rundt elementet.
• “posisjon”Med verdien”slektning”Plasser elementet i forhold til dens nåværende posisjon.

Stil “Sub-Main-1” -klasse

“Sub-Main-1”Klasse er stylet med følgende egenskaper for å lage en boks 1:

.sub-main-1
Bredde: 150px;
Høyde: 150px;
Bakgrunnsfarge: CadetBlue;
Posisjon: Absolutt;
Topp: 30px;
Venstre: 20px;

Her:

• “posisjon”Med verdien”Absolutt”Plasserer elementet i henhold til dets foreldreposisjonerte element.
• “topp”Og“venstre”Brukes til å legge til plass på elementets topp og venstre.

Stil “Sub-Main-2” -klasse

For boks 2 brukes følgende stiler:

.sub-main-2
Bredde: 150px;
Høyde: 150px;
bakgrunnsfarge: RGB (223, 134, 186);
Posisjon: Absolutt;
Topp: 60px;
Venstre: 50px;

Stil “Sub-Main-3” -klasse

Følgende CSS -egenskaper brukes til å lage boks 3:

.sub-main-3
Bredde: 150px;
Høyde: 150px;
bakgrunnsfarge: RGB (210, 243, 186);
Posisjon: Absolutt;
Topp: 90px;
Venstre: 80px;

De fire boksene er opprettet med suksess og er i naturlig stablingsrekkefølge:

Angi elementets posisjon

Det viktige å vurdere er at "Z-indeks”Eiendom fungerer bare med posisjonerte elementer. Legg til egenskapen "Z-Index" med hvilken som helst verdi, for eksempel "1”. Så hvis vi fjerner “posisjon”Eiendom fra“Sub-Main-2”Klasse,“Z-indeks”Eiendom fungerer ikke:

Elementer med samme z-indeksverdi vil stable i rekkefølge etter utseende

Hvis alle elementene blir justert med det samme "Z-indeks”Verdi, de vil alle stable i sin rekkefølgen på utseendet. Øk derfor verdien av "z-indeks" -egenskapen til elementet du vil vise foran alle.

La oss implementere det ved hjelp av et eksempel:

Foreldre 1
Barn 1
Barn 2

I CSS, tilordne hver klasse med egenskapen "Z-Index" som har verdien "1". Nettsiden vil se slik ut:

Sette stablingsnivået til barneelement i forhold til foreldrene

Barna til overordnede elementstabel i forhold til dets overordnede element. De vil ikke påvirke stablingsrekkefølgen til det andre søskenelementet.

For en god forståelse, analyser eksemplet nedenfor.

Opprett en HTML -fil

• Først, legg til en "”Element for foreldre 1 og tilordne det en klasse”Main-1”.
• Inne i dette, legg til "" elementer for barnas barn 1, barn 2 og modalt lag.
• På slutten, legg til et "" element for foreldre 2:

Foreldre 1
Barn 1
Barn 2


Foreldre 2

Sett "Main-1”Klasse“Z-indeks”Verdi som“2”:

z-indeks: 2;

Stil "barnemodal" klasse

.barnemodal
Posisjon: Fast;
Topp: 0px;
Venstre: 0px;
Bredde: 100%;
Høyde: 100VH;
z-indeks: 100;
Bakgrunnsfarge: RGBA (0, 0, 0, 0.295);

“barnemodalt”Klassen“Z-indeks”Verdien er satt som“100”, Som betyr at det må være foran søskenelementene.

Sett "Z-indeks”Verdien av“Sub-Main-2”Klasse“5”:

z-indeks: 5;

Sett "Z-indeks”Verdien av“Main-2”Klasse“3”:

z-indeks: 3;

Vi kan observere fra bildet nedenfor som søsken “Main-2”Av overordnede element er foran“Main-1”Foreldre selv om et av barneelementene har en større”Z-indeks”Verdi. Dette er fordi foreldre “Main-1” -klassen har “Z-INDEX” egenskapverdien “2” og “Main-2” har en “Z-INDEX” -verdi “3”:

Dette er grunnene til at Z-indeksen ikke fungerer.

Konklusjon

“Z-indeks”Eiendom fungerer på de plasserte elementene, som elementene som har“posisjon”Eiendom”Absolutt”,“fikset", eller mer. Hvis overordnede elementets "z-indeks" -verdi er mindre enn søskenelementet, og barnet til det tidligere overordnede elementet har en større "z-indeks" -verdi, vil søskenelementet vises foran alt. Denne oppskrivningen har diskutert egenskapen "Z-Index" og hvorfor den ikke fungerer.