4 razloga što vaš z-indeks ne radi (i kako ga popraviti) - Coder Coder

Ovaj je post izvorno objavljen na Coder-Coder.com.

Z-indeks je CSS svojstvo koje vam omogućuje pozicioniranje elemenata u slojevima jedan iznad drugog. To je izuzetno koristan i iskreno vrlo važan alat koji se zna koristiti u CSS-u.

Nažalost, z-indeks je jedno od onih svojstava koje se ne ponaša uvijek intuitivno. U početku se čini jednostavno - veći z-indeksni broj znači da će element biti na vrhu elemenata s nižim z-indeksnim brojevima. Ali postoje neka dodatna pravila koja stvari čine složenijima. I ne možete uvijek popraviti stvari postavljanjem z-indeksa na 999999! ?

Ovaj će članak detaljno objasniti četiri najčešća razloga zbog kojih z-indeks ne radi za vas i točno kako ga možete popraviti.

Prolazit ćemo kroz neke stvarne primjere koda i rješavati ih. Nakon što pročitate ovaj članak, moći ćete razumjeti i izbjeći one uobičajene zamke z-indeksa!

Provjerimo prvi razlog:

1. Elementi u istom kontekstu slaganja prikazivat će se prema redoslijedu izgleda, a potonji elementi na vrhu prethodnih elemenata.

U našem prvom primjeru imamo relativno jednostavan izgled koji uključuje 3 glavna elementa:

  • Slika mačke
  • Bijeli blok s tekstom
  • Još jedna slika iste mačke

Evo HTML oznake za to:

 Meow meow meow... 

U ovom rasporedu idealno želimo da bijeli blok teksta bude na vrhu obje mačke.

Da bismo to pokušali postići, dodali smo neke negativne margine u CSS za obje slike mačke, tako da se malo preklapaju s bijelim blokom:

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

Međutim, izgleda ovako:

Prva mačka doista je smještena ispod bijelog bloka sadržaja, baš kao što mi želimo. Ali druga mačja slika postavljena je na vrh bloka!

Zašto se ovo događa?

Razlog takvom ponašanju je prirodni redoslijed slaganja na web stranicu. Ove smjernice u osnovi određuju koji će elementi biti na vrhu, a koji na dnu.

Čak i ako elementi nemaju svoj z-indeks, postoji rima i razlog koji će biti na vrhu.

U našem slučaju, niti jedan od elemenata nema vrijednost z-indeksa. Dakle, njihov redoslijed slaganja određen je redoslijedom izgleda. Prema ovom pravilu, elementi koji dolaze kasnije u označavanju bit će na vrhu elemenata koji dolaze prije njih.

(Više smjernica za redoslijed slaganja na Mozilla Developer Network možete pročitati ovdje.)

U našem primjeru s mačkama i bijelim blokom, oni poštuju ovo pravilo. Zato je prva mačka ispod elementa bijelog bloka, a bijela blok ispod druge mačke.

Ok, redoslijed slaganja je sasvim dobar, ali kako popraviti CSS tako da je druga mačka ispod bijelog bloka?

Pogledajmo drugi razlog:

2. Element nema postavljenu poziciju

Jedna od ostalih smjernica koje određuju redoslijed slaganja jest da li element ima postavljen položaj ili ne.

Da biste postavili položaj elementa, dodajte positionsvojstvo CSS bilo čemu osim static, poput relativeili absolute. (Više o tome možete pročitati u ovom članku koji sam napisao.)

Prema ovom pravilu, pozicionirani elementi prikazivat će se na vrhu nepozicioniranih elemenata.

Dakle, postavljanjem bijelog bloka na position: relativepoložaj i ostavljanjem dva elementa mačke nepozicioniranim, bijeli blok stavit će se na vrh mačaka redoslijedom slaganja.

Ovako će izgledati - također se možete poigrati s gore navedenim Codepenom.

Woohoo!

Sada, sljedeća stvar koju želimo učiniti je okretati donju mačku naopako, koristeći transformsvojstvo. Tako će obje mačke biti ispod bijelog bloka, a samo će im glave viriti.

No, to može uzrokovati više z-indexzabunu u vezi s tim. Problemu i rješenju pozabavit ćemo se u sljedećem dijelu.

3. Postavljanje nekih CSS svojstava poput neprozirnosti ili transformacije stavit će element u novi kontekst slaganja.

Kao što smo upravo spomenuli, donju mačku želimo okrenuti naopako. Da bismo to postigli, mi ćemo dodati transform: rotate(180deg).

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

Ali to dovodi do toga da se donja mačka ponovno prikazuje na vrhu bijelog bloka!

Koji se vrag ovdje događa ??

Možda nećete često nailaziti na ovaj problem, ali drugi aspekt redoslijeda slaganja je taj što neka svojstva CSS-a vole transformili opacityće staviti element u svoj novi kontekst slaganja.

Što to znači da je dodavši kako transformse na .cat-bottomelementu čini se ponašaju kao da je imao z-indexod 0. Iako je nema positionili z-indexset na sve! (W3.org ima informativnu, ali prilično gustu dokumentaciju o tome kako ovo funkcionira sa objektom opacity)

Zapamtite, nikada nismo dodali z-indexvrijednost samo bijelom bloku position: relative. To je bilo dovoljno da se bijeli blok postavi na vrh nepozicioniranih mačaka.

Ali budući da .bottom-catelement djeluje kao da je relativno pozicioniran z-index: 0, transformacijom ga je postavio na vrh bijelog bloka.

Rješenje za to je postaviti position: relativei izričito postaviti z-indexbarem bijeli blok. Možete ići korak dalje i postaviti position: relativei niže z-indexelemente mačke, samo da biste bili na sigurnom.

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

Po mom mišljenju, ovo će riješiti većinu osnovnih, ako ne i sva osnovna pitanja z-indeksa.

Sada, prijeđimo na naš posljednji razlog da vaš z-indexne radi. Ovaj je nešto složeniji, jer uključuje roditeljske i podređene elemente.

4. Element je u nižem kontekstu slaganja zbog razine z-indeksa roditelja

Provjerimo naš primjer koda za ovo:

Evo što imamo: jednostavna web stranica s redovitim sadržajem i ružičasta bočna kartica s natpisom „Pošaljite povratne informacije“ koja se nalazi na vrhu sadržaja.

Zatim, kada kliknete na fotografiju mačke, otvara se modalni prozor s prozirnom sivom pozadinom.

Međutim, čak i kada je modalni prozor otvoren, bočna je kartica i dalje na vrhu sivog sloja. Želimo da se sloj prikazuje preko svega, uključujući bočnu karticu.

Pogledajmo CSS za dotične elemente:

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

Svi elementi imaju postavljeni položaj, a bočna kartica ima z-index5, što ga postavlja na vrh elementa sadržaja koji je na z-index: 1.

Zatim, modal ima z-index: 100koji bi ga trebao staviti na vrh bočne kartice na z-index: 5. Ali umjesto toga, modalni sloj nalazi se ispod bočne kartice.

Zašto se ovo događa?

Prije smo se pozabavili nekim čimbenicima koji ulaze u kontekst slaganja, na primjer ako element ima postavljen položaj, kao i redoslijed u označavanju.

Ali još jedan aspekt konteksta slaganja je taj što je podređeni element ograničen na kontekst slaganja svog roditelja.

Pogledajmo pobliže tri dotična elementa.

Evo oznake koju imamo:

Gledajući oznake, možemo vidjeti da su sadržaj i elementi bočne kartice braća i sestre. Odnosno, postoje na istoj razini u označavanju (to se razlikuje od razine z-indeksa). A modal je podređeni element elementa sadržaja.

Budući da je modal unutar elementa sadržaja, njegov z-indexod 100 ima učinak samo unutar svog nadređenog, elementa sadržaja. Na primjer, da postoje drugi podređeni elementi koji su braća i sestre prema modalu, njihove z-indexvrijednosti stavljale bi ih jedna na drugu ili ispod njih.

Ali z-indexvrijednost tih podređenih elemenata ne znači ništa izvan roditelja, jer je nadređeni element sadržaja z-indexpostavljen na 1.

Dakle, njegova djeca, uključujući modal, ne mogu se probiti s te z-indexrazine.

(Možete se sjetiti s ovom pomalo depresivnom metaforom: dijete mogu ograničiti roditelji i ne može ih se osloboditi.)

Postoji nekoliko rješenja za ovaj problem:

Rješenje: Premjestite modal izvan roditelja sadržaja i u glavni kontekst slaganja stranice.

Ispravljena oznaka tada bi izgledala ovako:

Sada je modalni element brat i sestra za ostala dva. To stavlja sva tri elementa u isti kontekst slaganja kao i oni, pa će svaka od njihovih razina z-indeksa sada utjecati jedna na drugu.

U ovom novom kontekstu slaganja, elementi će se prikazati sljedećim redoslijedom, od vrha do dna:

  • modalni ( z-index: 100)
  • bočna kartica ( z-index: 5)
  • sadržaj ( z-index: 1)

Alternativno rješenje: Uklonite pozicioniranje iz sadržaja, tako da neće ograničiti z-indeks modalnog.

Ako ne želite ili ne možete promijeniti označavanje, možete riješiti ovaj problem uklanjanjem positionpostavke iz elementa sadržaja:

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

Budući da je element sadržaja sada nepozicioniran, više neće ograničavati vrijednost modaliteta z-index. Dakle, otvoreni modal bit će postavljen na vrh bočnog elementa kartice, zbog veće z-indexod 100.

Iako ovo djeluje, osobno bih se zauzeo za prvo rješenje.

Jer ako iz nekog razloga u budućnosti budete morali pozicionirati element sadržaja, to će opet ograničiti redoslijed modalnog u kontekstu slaganja.

U sažetku

Nadam se da vam je ovaj vodič bio koristan! Ukratko, većina problema sa z-indeksom može se riješiti slijedeći ove dvije smjernice:

  1. Provjerite imaju li elementi postavljeni položaj i brojeve z-indeksa u ispravnom redoslijedu.
  2. Pazite da nemate roditeljske elemente koji ograničavaju z-indexrazinu njihove djece.

Želite više?

Kreiram tečaj responzivnog dizajna! Prijavite se ovdje da biste dobili e-poštu kad bude objavljena.

Vodiče za web razvoj pišem na svom blogu coder-coder.com, objavljujem mini savjete na Instagramu i vodiče za kodiranje na YouTubeu.