Hva er z-indeksegenskap i CSS?

Cascading Style Sheets (CSS) gir et humongøst utvalg av egenskaper som spesifiserer hvordan HTML-elementer vil vises på websider, for eksempel, Display-egenskap definerer visningsatferden til elementer, posisjonsegenskap spesifiserer posisjonen til elementer. Bakgrunnsfargegenskapen gir bakgrunnsbakgrunn farge til elementer, og listen fortsetter. Denne oppskrivningen er spesialdesignet for å understreke betydningen av Z-Index-egenskapen i CSS.

I HTML har elementer en viss stablingsrekkefølge som spesifiserer arrangementet som elementer er plassert. Regelen definert for elementposisjonering er at elementet som har en høyere stablingsrekkefølge er plassert foran elementet med lavere stablingsrekkefølge. En stabelrekkefølge av et element kan utvise både positive og negative verdier.

Hva er z-indeksegenskap i CSS

Z-INDEX-egenskapen definerer stabelrekkefølgen til HTML-elementer på en måte som den spesifiserer hvilket element som vises foran og hvilket element som vises i bakgrunnen.

Syntaks

z-indeks: verdi;

Z-Index-egenskapen kan utvise visse egenskaper som er forklart i detalj nedenfor.

Verdi	Beskrivelse
bil	Denne verdien angir stabelrekkefølgen på elementer som tilsvarer foreldrenes elementer.
Antall	Denne verdien brukes til å gi en stabelbestilling manuelt til et element. Stabelrekkefølgen kan utvise både positive og negative verdier.
første	Denne verdien angir stabelrekkefølgen til et element til standardverdien.
arve	Denne verdien setter stabelrekkefølgen til et element i henhold til egenskapene som elementet arvet fra foreldrenes element.

Her har vi illustrert Z-Index-egenskapen ved hjelp av noen eksempler.

Eksempel 1

Anta at du vil gi et bakgrunnsbilde på nettstedet ditt, og at du vil at de andre elementene dine skal vises foran det bildet. Bruk følgende kodebit.

Html

Morgenvandring er gunstig for helse

I eksemplet ovenfor er det to elementer en er en

element og det andre er et element.

CSS

H2
Posisjon: relativ;
Venstre: 200px;
Topp: 0px;

IMG
z -indeks: -1;
Posisjon: Absolutt;
Venstre: 200px;
Topp: 0px;

Elementet er plassert i bakgrunnen til

element fordi z -indeksegenskapen som er tildelt elementet er -1. Videre

Elementet er relativt plassert 200px fra venstre og 0px fra toppen, mens elementet har en absolutt posisjon som betyr at det vil bli plassert 200px fra venstre og 0px fra toppen, med hensyn til posisjonen til forfedreselementet .

Produksjon

Her er en output av eksemplet ovenfor.

Begge elementene er vellykket stablet.

Nå hvis vi fjerner z-indeksverdien fra elementet, vil det bli plassert foran

element fordi det er definert sist i dokumentstrømmen.

IMG
/*z -indeks: -1;*/
Posisjon: Absolutt;
Venstre: 200px;
Topp: 0px;

Produksjon

Nå

elementet er plassert bak elementet.

Eksempel 2

I dette eksemplet har vi demonstrert bruken av positiv z-indeksverdi, dessuten har vi i dette eksemplet illustrert hvordan vi kan plassere et element bak et bestemt element. Her opprettes to elementer.

Html

Div 1
Div 2

Den første diven har en relativ posisjon som betyr at den vil være plassert 20px fra venstre og 10px fra toppen i forhold til den opprinnelige posisjonen, dessuten har vi tildelt den en z-indeksverdi på 1.

.div1
z-indeks: 1;
Posisjon: relativ;
Venstre: 20px;
Topp: 10px;
Grense: 3px solid grå;
Høyde: 100px;
Bredde: 300px;

For den andre diven har vi tildelt det en absolutt posisjon som betyr at den vil bli plassert 100px fra venstre og 60 px fra toppen med hensyn til posisjonen til foreldreelementet.

.div2
Posisjon: Absolutt;
Venstre: 100px;
Topp: 60px;
Bakgrunnsfarge: Indianred;
Høyde: 80px;
Bredde: 200px;

Produksjon

Div 2 vellykket stablet bak div 1.

Poeng å huske!

1. Du må definere elementets plassering, ellers vil ikke Z-Index-egenskapen fungere. (Elementer kan ha absolutte, relative, faste eller klissete posisjoner).

2. Uten å spesifisere Z-Index-egenskapen, hvis to elementer overlater over hverandre, er elementet som er definert sist i dokumentstrømmen plassert foran det andre elementet.

Konklusjon

Z-Index-egenskapen brukes til å angi stablingsrekkefølgen til HTML-elementer, noe som betyr at den spesifiserer arrangementet av elementene som vises på websiden. Z-Index-egenskapen viser fire verdier som er; Auto som angir stabelrekkefølgen på elementer som tilsvarer den for deres foreldreelementer, nummer brukes til å manuelt gi en stabelrekkefølge til et element, innledende setter stabelrekkefølgen til et element til standardverdien, og arve setter stabelrekkefølgen til en element i henhold til egenskapene som elementet arvet fra overordnet element. Dette innlegget diskuterer Z-Index-egenskapen i dybden ved hjelp av passende eksempler.