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

Z-indeks je svojstvo CSS-a koje vam omogućuje postavljanje elemenata u slojevima jedan na drugi. Super je koristan i, iskreno, vrlo važan alat za korištenje CSS-a.

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

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

Proći ćemo kroz neke stvarne primjere koda i riješiti ih. Nakon čitanja ovog članka moći ćete razumjeti i izbjeći te uobičajene zamke z-indeksa!

Provjerimo prvi razlog:

1. Elementi u istom kontekstu slaganja prikazuju se redoslijedom izgleda, a drugi elementi su iznad bivših 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 izgledu idealno želimo da bijeli blok teksta bude iznad obje mačke.

Da bismo to pokušali postići, CSS-u smo dodali negativne margine za obje slike mačaka kako bi se malo preklopili bijeli blok:

.cat-top {
   marža-dno: -110px;
}
.cat-bottom {
   plutati: desno;
   margina-top: -120px;
}

Međutim, izgleda ovako:

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

Zašto se ovo događa?

Razlog takvog ponašanja je zbog prirodnog poretka slaganja na web stranici. Ove smjernice u osnovi određuju koji će se elementi nalaziti na vrhu, a koji na dnu.

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

U našem slučaju nijedan element nema vrijednost z-indeksa. Dakle, njihov redoslijed slaganja određuje se njihovim redoslijedom izgleda. Prema ovom pravilu, elementi koji dolaze kasnije u označavanje nalazit će se na vrhu elemenata koji dolaze prije njih.

(Više smjernica za naručivanje slaganja možete pročitati ovdje u Mozilla Developer Network.)

U našem primjeru s mačkama i bijelim blokom poštuju se ovo pravilo. To je razlog zašto je prva mačka ispod elementa bijelog bloka, a bijeli blok ispod druge mačke.

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

Pogledajmo drugi razlog:

2. Element nema postavljen položaj

Jedna od drugih smjernica koja određuje redoslijed slaganja je ako element ima postavljen položaj ili ne.

Za postavljanje položaja za element, dodajte svojstvo položaja CSS u bilo što drugo osim statičkog, poput relativnog ili apsolutnog. (Više o tome možete pročitati u ovom članku koji sam napisao.)

Prema ovom pravilu, pozicionirani elementi prikazat će se na vrhu nerazvrstanih elemenata.

Dakle, postavljanje bijelog bloka na položaj: relativno, a dva mačja elementa nerazvrstana stavit će bijeli blok na vrh mačaka u redoslijed slaganja.

Ovako će izgledati - možete se i igrati s gore navedenim Codepenom.

Juhu!

Sljedeće što želimo učiniti je okrenuti donju mačku naglavačke, koristeći svojstvo transformacije. Na taj će način obje mačke biti ispod bijelog bloka, samo će glava biti ispružena.

Ali to može uzrokovati još zbunjenosti u vezi s indeksom. U sljedećem ćemo dijelu riješiti problem i rješenje.

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

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

.cat-bottom {
   plutati: desno;
   margina-top: -120px;
   transformacija: rotirati (180deg);
}

Ali to uzrokuje da se donja mačka ponovo prikaže na vrhu bijelog bloka!

Što se dovraga događa ovdje?

Možda se ne susrećete s ovim problemom često, ali drugi aspekt redoslijeda slaganja je da će neka CSS svojstva poput transformacije ili neprozirnosti element staviti u svoj novi kontekst slaganja.

To znači da dodavanje transformacije elementu .cat-bottom čini da se on ponaša kao da ima z-indeks 0. Iako uopće nema postavljen položaj ili z-indeks! (W3.org ima informativnu, ali prilično gustu dokumentaciju o tome kako to funkcionira sa svojstvom neprozirnosti)

Zapamtite, nikad nismo dodali vrijednost z-indeksa bijelom bloku, samo položaj: relativno. Ovo je bilo dovoljno da se bijeli blok postavi na vrh mačaka koje nisu stavljene na mjesto.

No, budući da.

Rješenje za to je postaviti položaj: relativan i izričito postavljen z-indeks barem na bijelom bloku. Možete otići korak dalje i postaviti položaj: relativni i niži z-indeks na mačjim elementima, samo da biste bili dodatno sigurni.

.content__block {
   položaj: relativan;
   z-indeks: 2;
}
.cat-top, .cat-bottom {
   položaj: relativan; z-indeks: 1;
}

Po mom mišljenju, ovo će riješiti većinu, ako ne i sve osnovne teme z-indeksa.

A sada, prijeđite na naš posljednji razlog što vaš z-indeks ne radi. Ovaj je malo složeniji, jer uključuje elemente roditelja i djeteta.

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

Pogledajte ovaj primjer koda za ovo:

Evo što imamo: jednostavna web stranica s redovitim sadržajem i ružičasta bočna kartica na kojoj piše "Pošalji povratne informacije" koja je postavljena na vrhu sadržaja.

Zatim, kad kliknete na fotografiju mačke, otvara se modalni prozor s prozirnim prekrivačem sive pozadine.

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

Pogledajmo CSS za predmetne elemente:

.content {
   položaj: relativan;
   z-indeks: 1;
}
.modal {
   položaj: fiksiran;
   z-indeks: 100;
}
.side-tab {
   položaj: fiksiran;
   z-indeks: 5;
}

Svi elementi imaju postavljen položaj, a bočna kartica ima z-indeks 5, koji je pozicioniran nad elementom sadržaja, koji je na z-indeksu: 1.

Zatim, modal ima z-indeks: 100 što bi ga trebalo staviti na vrh bočne kartice na z-indeks: 5. Ali umjesto toga, modalni prekrivač je ispod bočne kartice.

Zašto se ovo događa?

Prije smo se pozabavili nekim čimbenicima koji idu u kontekst slaganja, kao što je ako element ima svoj položaj postavljen, kao i svoj redoslijed u označavanju.

Ali još jedan aspekt konteksta slaganja je da je dječji element ograničen na kontekst slaganja svog roditelja.

Pogledajmo pobliže tri dotična elementa.

Evo oznake koju imamo:

    

Gledajući oznaku, možemo vidjeti da su elementi sadržaja i bočnih kartica braća i sestre. Odnosno, oni postoje na istoj razini u označavanju (to je različito od razine z-indeksa). A modal je podređeni element sadržaja.

Kako se modal nalazi unutar elementa sadržaja, njegov z-indeks 100 ima učinak samo unutar svog nadređenog, elementa sadržaja. Na primjer, ako je bilo drugih podređenih elemenata koji su braća i sestre modalnom, njihove vrijednosti z-indeksa stavljale bi ih iznad ili ispod njih.

Ali vrijednost z-indeksa tih podređenih elemenata ne znači ništa izvan roditelja, jer element nadređenog sadržaja ima z-indeks postavljen na 1.

Dakle, njegova djeca, uključujući modalni, ne mogu probiti tu razinu z-indeksa.

(Možete se sjećati po ovoj pomalo depresivnoj metafori: dijete mogu ograničiti njegovi roditelji i ne može se osloboditi njih.)

Postoji nekoliko rješenja ovog problema:

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

Ispravljena markacija tada bi izgledala ovako:

Sada je modalni element braća i druga dva. Ovo stavlja sva tri elementa u isti kontekst slaganja kao i oni, tako da će svaka njihova 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-indeks: 100)
  • bočna kartica (z-indeks: 5)
  • sadržaj (z-indeks: 1)

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

Ako ne želite ili ne možete promijeniti oznaku, možete riješiti problem uklanjanjem postavke položaja iz elementa sadržaja:

.content {
   // Nije postavljen položaj
}
.modal {
   položaj: apsolutni;
   z-indeks: 100;
}
.side-tab {
   položaj: apsolutni;
   z-indeks: 5;
}

Budući da je element sadržaja sada neraspoložen, više neće ograničiti vrijednost z-indeksa modaliteta. Tako će otvoreni modal biti postavljen na element bočnog jezička, zbog svog višeg z-indeksa od 100.

Dok to radi, osobno bih se zalagao za prvo rješenje.

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

U sažetku

Nadam se da ste vam ovaj udžbenik pomogli! 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. Pobrinite se da nemate roditeljske elemente koji ograničavaju razinu z-indeksa njihove djece.

Resursi:

  • W3.org: Transparentnost: svojstvo 'neprozirnosti'
  • W3.org: Određivanje razine snopa
  • Mozilla Developer Network: Kontekst slaganja
  • PhilipWalton.com: Što vam nitko nije rekao o Z-indeksu
  • Smashing Magazin: ZS indeks svojstva CSS

Želite više?

Pročitajte više tutorijala na mom blogu, coder-coder.com.
Prijavite se ovdje kako biste primali e-poštu o novim člancima.
Pridružite se 25 000+ drugima - pratite @thecodercoder na Instagramu.