Da li ste ikada postavili z-index: 99999 na element u svom CSS-u, a on se ne pojavljuje iznad drugih elemenata? Tako velika vrijednost bi trebala lako postaviti taj element vizualno na bilo šta drugo, pod pretpostavkom da su svi različiti elementi postavljeni na nižu vrijednost ili nisu postavljeni uopće. Web stranica je obično predstavljena u dvodimenzionalnom prostoru; međutim, primjenom specifičnih svojstava CSS-a, uvodi se zamišljena ravan z-ose kako bi se prenijela dubina. Ova ravan je okomita na ekran i iz nje korisnik percipira redosled elemenata, jedan iznad drugog. Ideja iza imaginarne z-ose, korisničke percepcije naslaganih elemenata, je da se svojstva CSS-a koja ga kreiraju kombinuju da formiraju ono što nazivamo kontekstom slaganja. Govorit ćemo o tome kako se elementi "slažu" na web stranici, šta kontrolira redoslijed slaganja i praktični pristup "rasklapanju" elemenata kada je to potrebno. O slaganju konteksta Zamislite svoju web stranicu kao sto. Dok dodajete HTML elemente, polažete komade papira, jedan za drugim, na sto. Posljednji postavljeni komad papira je ekvivalentan posljednjem dodanom HTML elementu i nalazi se iznad svih ostalih papira koji se nalaze prije njega. Ovo je normalan tok dokumenta, čak i za ugniježđene elemente. Sam stol predstavlja kontekst slaganja korijena, formiran od elementa, koji sadrži sve ostale mape. Sada, specifična CSS svojstva dolaze u igru. Svojstva kao što su pozicija (sa z-indeksom), neprozirnost, transformacija i sadržaj) djeluju kao mapa. Ovaj folder uzima element i svu njegovu djecu, izdvaja ih iz glavnog steka i grupiše ih u poseban podsklad, stvarajući ono što nazivamo kontekstom slaganja. Za pozicionirane elemente, ovo se dešava kada deklarišemo vrednost z-indeksa koja nije auto. Za svojstva kao što su neprozirnost, transformacija i filter, kontekst slaganja se kreira automatski kada se primjenjuju određene vrijednosti.
Pokušajte da shvatite ovo: Jednom kada se komad papira (tj. podređeni element) nalazi unutar fascikle (tj. roditeljskog konteksta slaganja), nikada ne može izaći iz te mape ili biti smješten između papira u drugom folderu. Njegov z-indeks je sada relevantan samo unutar vlastitog foldera.
Na donjoj ilustraciji, papir B je sada unutar konteksta slaganja fascikle B i može se naručiti samo sa drugim papirima u fascikli.
Zamislite, ako hoćete, da imate dva foldera na svom stolu:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Ažurirajmo malo oznake. Unutrašnja fascikla A je posebna stranica, z-indeks: 9999. Unutrašnja fascikla B je obična stranica, z-indeks: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Koja je stranica na vrhu? To je .plain-stranica u folderu B. Pretraživač ignoriše podređene papire i prvo slaže dva foldera. On vidi fasciklu B (z-indeks: 2) i postavlja je na vrh fascikle A (z-indeks: 1) jer znamo da je dva veće od jedan. U međuvremenu, stranica .special-page postavljena na z-index: 9999 stranica je na dnu steka iako je njen z-indeks postavljen na najvišu moguću vrijednost. Konteksti slaganja se također mogu ugniježditi (fascikle unutar foldera), stvarajući „porodično stablo“. Primjenjuje se isti princip: dijete nikada ne može pobjeći fasciklu svojih roditelja. Sada kada ste shvatili kako se konteksti slaganja ponašaju kao mape koje grupišu i mijenjaju redoslijed slojeva, vrijedi se zapitati: zašto određena svojstva – poput transformacije i neprozirnosti – stvaraju nove kontekste slaganja? Evo u čemu je stvar: ova svojstva ne stvaraju kontekste slaganja zbog toga kako izgledaju; oni to rade zbog načina na koji pretraživač radi ispod haube. Kada primijenite transformaciju, neprozirnost, filter ili perspektivu, govorite pregledniku: "Hej, ovaj element bi se mogao pomjeriti, rotirati ili izblijediti, stoga budite spremni!"
Kada koristite ova svojstva, pretraživač kreira novi kontekst slaganja za efikasnije upravljanje renderovanjem. Ovo omogućava pretraživaču da samostalno rukuje animacijama, transformacijama i vizuelnim efektima, smanjujući potrebu za ponovnim izračunavanjem načina na koji ovi elementi stupaju u interakciju sa ostatkom stranice. Zamislite to kao što pretraživač kaže: „Ovom fasciklu ću rukovati odvojeno, tako da ne moram da menjam ceo sto svaki put kada se nešto u njemu promeni.“ Ali postojinuspojava. Jednom kada pretraživač podigne element u sopstveni sloj, on mora „izravnati“ sve unutar njega, stvarajući novi kontekst slaganja. To je kao da skinete fasciklu sa stola da biste je odvojeno rukovali; sve unutar tog foldera se grupiše, a pretraživač ga sada tretira kao jednu jedinicu kada odlučuje šta se nalazi iznad čega. Dakle, iako se možda čini da svojstva transformacije i neprozirnosti ne utiču na način na koji se elementi vizuelno slažu, oni to čine, i to za optimizaciju performansi. Nekoliko drugih CSS svojstava također mogu kreirati kontekste slaganja iz sličnih razloga. MDN pruža kompletnu listu ako želite da kopate dublje. Ima ih dosta, što samo ilustruje koliko je lako nenamjerno stvoriti kontekst slaganja bez znanja. Problem "rasklapanja". Problemi sa slaganjem mogu se pojaviti iz mnogo razloga, ali neki su češći od drugih. Modalne komponente su klasični uzorak jer zahtijevaju prebacivanje komponente da bi se „otvorila“ na gornjem sloju iznad svih ostalih elemenata, a zatim je uklonila iz gornjeg sloja kada je „zatvorena“. Prilično sam uvjeren da smo svi naišli na situaciju da otvorimo modal i, iz bilo kojeg razloga, on se ne pojavljuje. Ne radi se o tome da se nije otvorio kako treba, već da je izvan vidokruga u nižem sloju konteksta slaganja. Ovo vas ostavlja da se zapitate "kako to?" pošto ste postavili:
.overlay { pozicija: fiksna; /* kreira kontekst slaganja */ z-indeks: 1; /* stavlja element na sloj iznad svega ostalog */ umetak: 0; širina: 100%; visina: 100vh; overflow: skriveno; boja pozadine: #00000080; }
Ovo izgleda ispravno, ali ako je roditeljski element koji sadrži modalni okidač podređeni element unutar drugog nadređenog elementa koji je također postavljen na z-indeks: 1, to tehnički postavlja modalni u podsloj zaklonjen glavnom mapom. Pogledajmo taj specifičan scenario i nekoliko drugih uobičajenih zamki konteksta slaganja. Mislim da ćete vidjeti ne samo koliko je lako nenamjerno stvoriti kontekste slaganja, već i kako ih pogrešno upravljati. Takođe, kako ćete se vratiti u upravljano stanje zavisi od situacije. Scenario 1: Zarobljeni modal
Možete odmah vidjeti svoj modal zarobljen u sloju niskog nivoa i identificirati roditelja. Browser Extensions Pametni programeri su napravili ekstenzije da pomognu. Alati poput ovog "CSS Stacking Context Inspector" proširenja za Chrome dodaju dodatnu z-indeks karticu u vaše DevTools da vam pokaže informacije o elementima koji kreiraju kontekst slaganja.
IDE Extensions Možete čak i uočiti probleme tokom razvoja sa ekstenzijom poput ove za VS Code, koja ističe potencijalne probleme konteksta slaganja direktno u vašem uređivaču.
Rasklapanje i vraćanje kontrole Nakon što smo identificirali osnovni uzrok, sljedeći korak je rješavanje istog. Postoji nekoliko pristupa kojima se možete uhvatiti u koštac s ovim problemom, a ja ću ih navesti redom. Ipak, možete izabrati bilo koga na bilo kom nivou; niko se ne može žaliti ili opstruirati drugog. Promijenite HTML strukturu Ovo se smatra optimalnim rješenjem. Da biste naišli na problem konteksta slaganja, morate postaviti neke elemente na smiješne pozicije unutar vašeg HTML-a. Restrukturiranje stranice će vam pomoći da preoblikujete DOM i eliminišete problem konteksta slaganja. Pronađite problematični element i uklonite ga iz elementa za zarobljavanje u HTML oznaci. Na primjer, možemo riješiti prvi scenario, “Zarobljeni modal”, tako što ćemo .modal-container premjestiti iz zaglavlja i staviti ga u element
samog.Ovaj sadržaj ima z-indeks 2 i još uvijek neće pokrivati modalni.Zaglavlje
Glavni sadržaj
Kada kliknete na dugme „Otvori modal“, modal se postavlja ispred svega kako bi trebalo da bude. Pogledajte scenario za olovku 1: Zarobljeni modal (rešenje) [račvano] od Shoyombo Gabriel Ayomide. Podesite TheKontekst roditeljskog slaganja u CSS-u Šta ako je element onaj koji ne možete premjestiti a da ne narušite raspored? Bolje je riješiti problem: roditelj uspostavlja kontekst. Pronađite CSS svojstvo (ili svojstva) odgovorno za pokretanje konteksta i uklonite ga. Ako ima svrhu i ne može se ukloniti, dajte roditelju višu vrijednost z-indeksa od njegovih srodnih elemenata da podigne cijeli kontejner. Sa višom vrijednošću z-indeksa, roditeljski kontejner se pomiče na vrh, a njegovi potomci se pojavljuju bliže korisniku. Na osnovu onoga što smo naučili u scenariju „Potopljeni padajući meni“, ne možemo pomjeriti padajući meni iz navigacijske trake; ne bi imalo smisla. Međutim, možemo povećati vrijednost z-indeksa .navbar kontejnera da bude veća od vrijednosti z-indeksa elementa .content. .navbar { pozadina: #333; /* z-indeks: 1; */ z-indeks: 3; položaj: relativan; }
Sa ovom promjenom, .padajući meni se sada pojavljuje ispred sadržaja bez ikakvih problema.
Pogledajte scenario za olovku 2: The Submerged Dropdown (Solution) [račva] Shoyombo Gabriel Ayomide.
Isprobajte portale, ako koristite okvir
U okvirima kao što su React ili Vue, Portal je funkcija koja vam omogućava da prikažete komponentu izvan njene normalne roditeljske hijerarhije u DOM-u. Portali su poput uređaja za teleportaciju vaših komponenti. Omogućuju vam da prikažete HTML komponente bilo gdje u dokumentu (obično pravo u document.body) dok ga drže logički povezanim sa svojim originalnim roditeljem za props, stanje i događaje. Ovo je savršeno za izbjegavanje zamki konteksta slaganja jer se renderirani izlaz doslovno pojavljuje izvan problematičnog roditeljskog kontejnera.
ReactDOM.createPortal(
Ovo osigurava da vaš padajući sadržaj nije skriven iza svog nadređenog, čak i ako roditelj ima prelijevanje: skriveno ili niži z-indeks. U scenariju „Osječeni opis alata“ koji smo ranije pogledali, koristio sam Portal da spasim opis alata od prelijevanja: skrivenog isječka tako što sam ga postavio u tijelo dokumenta i postavio iznad okidača unutar kontejnera. Pogledajte scenario za olovku 3: Isječeni opis alata (rešenje) [račvano] od Shoyombo Gabriel Ayomide. Predstavljamo kontekst slaganja bez nuspojava Svi pristupi objašnjeni u prethodnom odeljku imaju za cilj „razlaganje“ elemenata iz problematičnih konteksta slaganja, ali postoje neke situacije u kojima ćete zaista trebati ili želite da kreirate kontekst slaganja. Kreiranje novog konteksta za slaganje je jednostavno, ali svi pristupi dolaze sa nuspojavama. To jest, osim korištenja izolacije: izolirati. Kada se primjenjuje na element, kontekst slaganja djece tog elementa određuje se u odnosu na svako dijete i unutar tog konteksta, umjesto da na njega utječu elementi izvan njega. Klasičan primjer je dodjela negativnoj vrijednosti tom elementu, kao što je z-indeks: -1. Zamislite da imate komponentu .card. Želite dodati ukrasni oblik koji se nalazi iza teksta kartice, ali na vrhu pozadine kartice. Bez konteksta slaganja na kartici, z-indeks: -1 šalje oblik na dno osnovnog konteksta slaganja (cijela stranica). Zbog toga nestaje iza bijele pozadine .card kartice: Pogledajte Pen Negative z-index (problem) [račva] od Shoyombo Gabriel Ayomide. Da bismo ovo riješili, deklariramo izolaciju: izolaciju na roditeljskoj .card kartici: Pogledajte Pen Negative z-index (rešenje) [račvano] od Shoyombo Gabriel Ayomide. Sada, sam element .card postaje kontekst slaganja. Kada njegov podređeni element – dekorativni oblik kreiran na :before pseudoelementu – ima z-indeks: -1, on ide do samog dna roditeljskog konteksta slaganja. Savršeno se nalazi iza teksta i na vrhu pozadine kartice, kako je zamišljeno. Zaključak Zapamtite: sljedeći put kada se vaš z-indeks čini izvan kontrole, to je zarobljeni kontekst slaganja. Reference
Kontekst slaganja (MDN) Z-indeks i konteksti slaganja (web.dev) “Kako kreirati novi kontekst slaganja sa svojstvom izolacije u CSS-u”, Natalie Pina “What The Heck, z-index??”, Josh Comeau
Daljnje čitanje o SmashingMag
“Upravljanje CSS Z-indeksom u velikim projektima”, Steven Frieson “Ljepljiva zaglavlja i elementi pune visine: lukava kombinacija”, Philip Braunen „Upravljanje Z-indeksom u web aplikaciji zasnovanoj na komponentama“, Pavel Pomerantsev “Z-Index CSS svojstvo: sveobuhvatan izgled”, Louis Lazaris
