Forklaret Z-indeks: Sådan stables elementer ved hjælp af CSS

Jeg har altid kæmpet med CSS-ejendomens z-indeks. Det lyder så let i starten. Elementer med en højere z-indeksværdi vises foran dem med en lavere z-indeksværdi. Alligevel har jeg mange gange havnet i situationer, hvor det ser ud til, at z-indeksværdien slet ikke havde nogen effekt.

Jeg besluttede, at jeg havde fået nok af prøving og fejl med z-indeks, og at jeg ønskede at få en bedre forståelse. Jeg håber, at denne artikel kan hjælpe dig, så du aldrig vil undre dig over, hvorfor z-index ikke gør, hvad du forventer, at det skal gøre.

Standard stabelrækkefølge

Lad os først nævne standardrækkefølgen, som browseren stabler elementer i, når der ikke anvendes noget z-indeks:

  1. Rodelement (elementet)
  2. Ikke-placerede elementer i den rækkefølge, de defineres
  3. Placerede elementer i den rækkefølge, de er defineret

Et ikke-positioneret element er et element med standardpositionsværdien statisk. Et positioneret element er et element med en hvilken som helst anden positionsværdi. Eksempler på andre værdier er: absolut, relativ, klæbrig eller fast.

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

Vi definerede den grønne boks sidst i dokumentet. Alligevel vises det bag de andre, fordi det ikke er placeret.

Stabler med z-indeks

Hvis vi nu vil ændre stablingsrækkefølgen for disse elementer, kan vi bruge egenskaben z-index. Et element med et højere z-indeks vises foran et element med et lavere z-indeks. En ting at bemærke er, at z-indeks kun fungerer med placerede elementer .

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

Den orange boks med et højere z-indeks vises foran den blå boks.

Stabelkontekst

Lad os sige, at vi tilføjer en anden positioneret boks til layoutet, som vi vil placere bag den lyserøde boks. Vi opdaterer vores kode til følgende:

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Vores lyserøde kasse vises som forventet foran den lilla kasse, men hvad skete der med den orange kasse? Hvorfor er det pludselig bag den blå, selvom den har et højere z-indeks? Dette skyldes, at tilføjelse af en z-indeksværdi til et element danner det, der kaldes en stablingskontekst .

Den lyserøde boks har en anden z-indeksværdi end auto, som danner en ny stablingskontekst. Det faktum, at det danner en stablingskontekst, påvirker, hvordan dets underordnede elementer vises.

Det er muligt at ændre stabelrækkefølgen af ​​de lyserøde bokselementelementer. Imidlertid har deres z-indeks kun en betydning inden for denne stablingskontekst . Dette betyder, at vi ikke vil være i stand til at flytte den orange boks foran den blå boks, fordi de ikke længere er inden for den samme stablingskontekst.

Hvis vi vil have den blå boks og den orange boks til at være en del af den samme stablingskontekst, kan vi definere den blå boks som et underordnet element i den lyserøde boks. Dette får den blå boks til at vises bag den orange.

Stablingskontekster dannes ikke kun, når der anvendes z-indeks på et element. Der er flere andre egenskaber, der får elementer til at danne stablingskontekster. Nogle eksempler er: filter, opacitet og transformation.

Lad os gå tilbage til vores tidligere eksempel. Den blå kasse er igen et søskende til den lyserøde kasse. Denne gang anvender vi et filter i stedet for at tilføje z-indeks til den lyserøde boks.

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Den orange kasse har stadig et højere z-indeks end den blå, men vises stadig bag den. Dette skyldes, at filterværdien fik den lyserøde boks til at danne en ny stablingskontekst.

Resumé

Ved at bruge z-indeks på placerede elementer kan vi ændre standardstabelrækkefølgen.

Når visse CSS-egenskaber anvendes, kan et element danne en stablingskontekst. Z-indeksværdier har kun en betydning inden for den samme stablingskontekst.

For mere information om z-index, anbefaler jeg denne artikel. Jeg fik en masse inspiration fra det, da jeg skrev dette.

Tak for læsningen! :)