4 grunde til, at dit z-indeks ikke fungerer (og hvordan man løser det) - Coder Coder

Dette indlæg blev oprindeligt offentliggjort på Coder-Coder.com.

Z-index er en CSS-egenskab, der giver dig mulighed for at placere elementer i lag oven på hinanden. Det er super nyttigt og ærligt talt et meget vigtigt værktøj til at vide, hvordan man bruger i CSS.

Desværre er z-index en af ​​de egenskaber, der ikke altid opfører sig på en intuitiv måde. Det virker simpelt i starten - et højere z-indeksnummer betyder, at elementet vil være oven på elementer med lavere z-indeksnumre. Men der er nogle yderligere regler, der gør tingene mere komplicerede. Og du kan ikke altid rette ting ved at indstille z-indekset til 999999! ?

Denne artikel forklarer detaljeret fire af de mest almindelige årsager til, at z-index ikke fungerer for dig, og præcis hvordan du kan ordne det.

Vi gennemgår nogle faktiske kodeeksempler og løser dem. Efter at have læst denne artikel vil du være i stand til at forstå og undgå disse almindelige z-indeks faldgruber!

Lad os tjekke den første grund:

1. Elementer i samme stablingskontekst vises i rækkefølge efter udseende, med sidstnævnte elementer oven på tidligere elementer.

I vores første eksempel har vi et relativt simpelt layout, der indeholder 3 hovedelementer:

  • Et billede af en kat
  • En hvid blok med tekst
  • Et andet billede af den samme kat

Her er HTML-markeringen for det:

 Meow meow meow... 

I dette layout ønsker vi ideelt set, at den hvide tekstblok skal være oven på begge katte.

For at prøve at opnå dette har vi tilføjet nogle negative margener til CSS for begge kattebilleder, så de overlapper den hvide blok lidt:

.cat-top { margin-bottom: -110px; } .cat-bottom { float: right; margin-top: -120px; }

Det ser dog sådan ud:

Den første kat er faktisk placeret under den hvide indholdsblok, ligesom vi ønsker. Men det andet kattebillede er placeret oven på blokken!

Hvorfor sker dette?

Årsagen til denne adfærd skyldes den naturlige ordre for stabling på websiden. Disse retningslinjer bestemmer grundlæggende, hvilke elementer der vil være på toppen, og hvilke der vil være i bunden.

Selvom elementer ikke har deres z-indeks, er der et rim og en grund til, hvilke der vil være på toppen.

I vores tilfælde har ingen af ​​elementerne en z-indeksværdi. Så deres stable rækkefølge bestemmes af deres rækkefølge for udseende. Ifølge denne regel vil elementer, der kommer senere i markeringen, være oven på de elementer, der kommer foran dem.

(Du kan læse mere om retningslinjerne for stable ordrer på Mozilla Developer Network her.)

I vores eksempel med kattene og den hvide blok overholder de denne regel. Derfor er den første kat under det hvide blokelement, og den hvide blok er under den anden kat.

Okay, ordre på stabling er alt sammen godt, men hvordan løser vi CSS, så den anden kat er under den hvide blok?

Lad os se på den anden grund:

2. Elementet har ikke sin position indstillet

En af de andre retningslinjer, der bestemmer stablingsrækkefølgen, er, om et element har sin position eller ikke.

For at indstille position for et element skal du tilføje CSS- positionegenskaben til noget andet end static, ligesom relativeeller absolute. (Du kan læse mere om det i denne artikel, som jeg skrev.)

Ifølge denne regel vises placerede elementer oven på ikke-placerede elementer.

Så hvis du indstiller den hvide blok til at være position: relative, og efterlader de to katteelementer upositioneret, placeres den hvide blok øverst på kattene i stablingsrækkefølgen.

Sådan ser det ud - du kan også lege med Codepen ovenfor.

Woohoo!

Nu er den næste ting, vi vil gøre, at rotere bundkatten på hovedet ved hjælp af transformejendommen. På den måde vil begge katte være under den hvide blok, hvor kun deres hoveder stikker ud.

Men at gøre det kan forårsage mere- z-indexrelateret forvirring. Vi behandler problemet og løsningen i den næste del.

3. Indstilling af nogle CSS-egenskaber som opacitet eller transformation sætter elementet i en ny stablingskontekst.

Som vi lige nævnte, vil vi vende bundkatten på hovedet. For at opnå dette tilføjer vi transform: rotate(180deg).

.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }

Men dette får den nederste kat til at blive vist oven på den hvide blok igen!

Hvad pokker foregår her ??

Du vil muligvis ikke løbe ind i dette problem ofte, men et andet aspekt af stable rækkefølge er, at nogle CSS-egenskaber kan lide transformeller opacityvil sætte elementet i sin egen nye stablingskontekst.

Hvad dette betyder er, at tilføje transformtil det .cat-bottomelement gør det opfører sig, som om det havde en z-indexaf 0. Selvom det ikke har sin positioneller z-indexsæt overhovedet! (W3.org har en informativ, men ret tæt dokumentation om, hvordan dette fungerer med opacityejendommen)

Husk, vi har aldrig kun tilføjet en z-indexværdi til den hvide blok position: relative. Dette var nok til at placere den hvide blok oven på de ikke-placerede katte.

Men da .bottom-catelementet fungerer som om det er relativt placeret med z-index: 0, har transformering det placeret oven på den hvide blok.

Løsningen på dette er at indstille position: relativeog udtrykkeligt indstille z-indexpå mindst den hvide blok. Du kan gå et skridt videre og sætte position: relativeet lavere z-indexpå katteelementerne, bare for at være ekstra sikker.

.content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; }

Efter min mening løser dette de fleste, hvis ikke alle de mere grundlæggende z-indeksproblemer.

Lad os nu gå videre til vores sidste grund til, at din z-indexikke fungerer. Denne er lidt mere kompleks, fordi den involverer forældre- og barnelementer.

4. Elementet er i en lavere stablingskontekst på grund af dets overordnede z-indeksniveau

Lad os tjekke vores kodeeksempel for dette:

Her er hvad vi har: en enkel webside med almindeligt indhold og en lyserød sidefane, der siger "Send feedback", der er placeret oven på indholdet.

Når du derefter klikker på fotoet af katten, åbnes et modalvindue med en gennemsigtig grå baggrundsoverlay.

Selv når modalvinduet er åbent, er sidefanen dog stadig oven på det grå overlay. Vi ønsker, at overlayet skal vises over alt inklusive sidefanen.

Lad os se på CSS for de pågældende elementer:

.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }

Alle elementer har deres positionssæt, og sidefanen har et z-indexpå 5, som placerer det oven på indholdselementet, som er ved z-index: 1.

Derefter har modalet, z-index: 100som skal placere det oven på sidefanen kl z-index: 5. Men i stedet er det modale overlay under sidefanen.

Hvorfor sker dette?

Tidligere behandlede vi nogle faktorer, der går ind i stablingskonteksten, f.eks. Hvis elementet har sin position indstillet, såvel som dets rækkefølge i markeringen.

Men endnu et andet aspekt af stablingskontekst er, at et underordnet element er begrænset til dets forældres stablingskontekst.

Lad os se nærmere på de pågældende tre elementer.

Her er den markering, vi har:

Når vi ser på markeringen, kan vi se, at indholds- og sidefaneelementerne er søskende. Det vil sige, de findes på samme niveau i markeringen (dette er forskelligt fra z-indeksniveauet). Og modalet er et underordnet element i indholdselementet.

Fordi modalet er inde i indholdselementet, har det z-indexkun 100 en effekt inden i dets overordnede, indholdselementet. For eksempel, hvis der var andre børneelementer, der var søskende til modalet, z-indexville deres værdier placere dem oven på eller under hinanden.

Men z-indexværdien af ​​disse underordnede elementer betyder ikke noget uden for forældrene, fordi det overordnede indholdselement er z-indexindstillet til 1.

Så dets børn, inklusive modalet, kan ikke bryde ud af dette z-indexniveau.

(Du kan huske det med denne lidt deprimerende metafor: et barn kan være begrænset af dets forældre og kan ikke komme fri af dem.)

Der er et par løsninger på dette problem:

Løsning: Flyt modalet uden for indholdsforælderen og ind i sidens hovedstabelkontekst.

Den korrigerede markering vil så se sådan ud:

Nu er det modale element et søskendeelement til de to andre. Dette sætter alle tre elementer i samme stablingskontekst som dem, så hvert af deres z-indeksniveauer vil nu påvirke hinanden.

I denne nye stablingskontekst vises elementerne i følgende rækkefølge, fra top til bund:

  • modal ( z-index: 100)
  • sideflig ( z-index: 5)
  • indhold ( z-index: 1)

Alternativ løsning: Fjern positionering fra indholdet, så det ikke begrænser modalets z-indeks.

Hvis du ikke vil eller ikke kan ændre markeringen, kan du løse dette problem ved at fjerne positionindstillingen fra indholdselementet:

.content { // No position set } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }

Da indholdselementet nu ikke er placeret, vil det ikke længere begrænse modalets z-indexværdi. Så det åbne modal vil blive placeret oven på sidefligelementet på grund af dets højere z-indexpå 100.

Mens dette fungerer, ville jeg personligt gå efter den første løsning.

Fordi hvis du af en eller anden grund i fremtiden er nødt til at placere indholdselementet, vil det igen begrænse modalets rækkefølge i stablingskonteksten.

Sammenfattende

Jeg håber, at du har fundet denne tutorial nyttig! For at opsummere kan de fleste problemer med z-index løses ved at følge disse to retningslinjer:

  1. Kontroller, at elementerne har deres positionssæt og z-indeksnumre i den rigtige rækkefølge.
  2. Sørg for, at du ikke har forældreelementer, der begrænser z-indexniveauet for deres børn.

Ønsker mere?

Jeg laver et kursus i responsivt design! Tilmeld dig her for at få e-mail, når den er offentliggjort.

Jeg skriver webudviklingsvejledninger på min blog coder-coder.com, sender mini-tip på Instagram og kodningstutorials på YouTube.