Ste že kdaj nastavili z-index: 99999 za element v svojem CSS-ju in se ne prikaže na vrhu drugih elementov? Tako velika vrednost bi ta element zlahka vizualno postavila na vrh česar koli drugega, ob predpostavki, da so vsi različni elementi nastavljeni na nižjo vrednost ali pa sploh niso nastavljeni. Spletna stran je običajno predstavljena v dvodimenzionalnem prostoru; vendar pa je z uporabo posebnih lastnosti CSS uvedena namišljena ravnina osi z za prenos globine. Ta ravnina je pravokotna na zaslon in iz nje uporabnik zaznava vrstni red elementov, enega nad drugim. Ideja za namišljeno osjo z, uporabnikovim dojemanjem zloženih elementov, je, da se lastnosti CSS, ki jo ustvarijo, združijo in tvorijo tako imenovani kontekst zlaganja. Govorili bomo o tem, kako so elementi "naloženi" na spletni strani, kaj nadzira vrstni red zlaganja in praktičnih pristopih za "razlaganje" elementov, ko je to potrebno. O kontekstih zlaganja Predstavljajte si svojo spletno stran kot mizo. Ko dodajate elemente HTML, polagate kose papirja enega za drugim na mizo. Zadnji postavljeni kos papirja je enakovreden nazadnje dodanemu elementu HTML in je na vrhu vseh drugih papirjev, ki so postavljeni pred njim. To je običajen tok dokumenta, tudi za ugnezdene elemente. Sama miza predstavlja korenski kontekst zlaganja, ki ga tvori element , ki vsebuje vse druge mape. Zdaj pridejo v poštev specifične lastnosti CSS. Lastnosti, kot so položaj (z z-indeksom), motnost, transformacija in vsebnost), delujejo kot mapa. Ta mapa vzame element in vse njegove podrejene elemente, jih ekstrahira iz glavnega sklada in jih združi v ločen podsklad, kar ustvari tako imenovani kontekst zlaganja. Za pozicionirane elemente se to zgodi, ko deklariramo vrednost indeksa z, ki ni auto. Za lastnosti, kot so motnost, transformacija in filter, se kontekst zlaganja ustvari samodejno, ko se uporabijo določene vrednosti.
Poskusite razumeti to: ko je kos papirja (tj. podrejeni element) znotraj mape (tj. nadrejenega konteksta zlaganja), ne more nikoli zapustiti te mape ali biti postavljen med papirje v drugi mapi. Njegov z-indeks je zdaj pomemben samo znotraj svoje mape.
Na spodnji sliki je papir B zdaj v kontekstu zlaganja mape B in ga je mogoče naročiti samo z drugimi papirji v mapi.
Predstavljajte si, če želite, da imate na mizi dve mapi:
.mapa-a { z-indeks: 1; } .folder-b { z-index: 2; }
Posodobimo oznako. Znotraj mape A je posebna stran, z-indeks: 9999. Znotraj mape B je navadna stran, z-indeks: 5.
.posebna stran { z-index: 9999; } .plain-page { z-index: 5; }
Katera stran je na vrhu? To je .plain-page v mapi B. Brskalnik ignorira podrejene dokumente in najprej zloži dve mapi. Vidi mapo B (z-indeks: 2) in jo postavi na vrh mape A (z-indeks: 1), ker vemo, da je dve večji od ena. Medtem je stran .special-page, nastavljena na z-index: 9999, na dnu sklada, čeprav je njen z-index nastavljen na najvišjo možno vrednost. Konteksti zlaganja so lahko tudi ugnezdeni (mape znotraj map), kar ustvari "družinsko drevo". Velja isto načelo: otrok nikoli ne more pobegniti iz mape svojih staršev. Zdaj, ko razumete, kako se konteksti zlaganja obnašajo kot mape, ki združujejo in preurejajo plasti, se je vredno vprašati: zakaj nekatere lastnosti – kot sta transformacija in motnost – ustvarijo nove kontekste zlaganja? Tukaj je stvar: te lastnosti ne ustvarijo kontekstov zlaganja zaradi tega, kako izgledajo; to počnejo zaradi tega, kako brskalnik deluje pod pokrovom. Ko uporabite transformacijo, motnost, filter ali perspektivo, brskalniku sporočate: "Hej, ta element se lahko premakne, zavrti ali zbledi, zato bodite pripravljeni!"
Ko uporabite te lastnosti, brskalnik ustvari nov kontekst zlaganja za učinkovitejše upravljanje upodabljanja. To brskalniku omogoča neodvisno upravljanje animacij, transformacij in vizualnih učinkov, kar zmanjša potrebo po ponovnem izračunavanju interakcije teh elementov s preostalim delom strani. Predstavljajte si to kot brskalnik, ki pravi: "To mapo bom obravnaval ločeno, tako da mi ne bo treba premeščati celotne mize vsakič, ko se nekaj na njej spremeni." Ampak obstajastranski učinek. Ko brskalnik dvigne element v lastno plast, mora "sploščiti" vse v njem in ustvariti nov kontekst zlaganja. To je tako, kot bi vzeli mapo z mize, da bi jo obravnavali ločeno; vse v tej mapi se združi, brskalnik pa to zdaj obravnava kot eno samo enoto, ko se odloča, kaj je nad čim. Torej, čeprav se morda zdi, da lastnosti transformacije in motnosti ne vplivajo na način vizualnega zlaganja elementov, vplivajo, in to za optimizacijo delovanja. Tudi več drugih lastnosti CSS lahko ustvari kontekste zlaganja iz podobnih razlogov. MDN nudi popoln seznam, če želite kopati globlje. Kar nekaj jih je, kar samo ponazarja, kako enostavno je nehote ustvariti kontekst zlaganja, ne da bi se tega zavedali. Težava »razlaganja«. Težave z zlaganjem lahko nastanejo zaradi številnih razlogov, vendar so nekateri pogostejši kot drugi. Modalne komponente so klasičen vzorec, ker zahtevajo preklop komponente na »odpiranje« na zgornji plasti nad vsemi drugimi elementi, nato pa jo odstranite iz zgornje plasti, ko je »zaprta«. Prepričan sem, da smo vsi naleteli na situacijo, ko odpremo modal in se iz kakršnega koli razloga ne prikaže. Ne gre za to, da se ni pravilno odprlo, ampak da ni vidno v nižji plasti konteksta zlaganja. To vas pusti, da se sprašujete, "kako to?" odkar si nastavil:
.overlay { položaj: fiksno; /* ustvari kontekst zlaganja */ z-indeks: 1; /* postavi element na plast nad vse ostalo */ vložek: 0; širina: 100 %; višina: 100vh; prelivanje: skrito; barva ozadja: #00000080; }
To je videti pravilno, toda če je nadrejeni element, ki vsebuje modalni sprožilec, podrejeni element znotraj drugega nadrejenega elementa, ki je prav tako nastavljen na z-index: 1, to tehnično postavi modal v podplast, ki jo zakriva glavna mapa. Oglejmo si ta specifični scenarij in nekaj drugih pogostih pasti v kontekstu zlaganja. Mislim, da boste videli ne samo, kako enostavno je nehote ustvariti kontekste zlaganja, ampak tudi, kako jih napačno upravljati. Tudi način vrnitve v upravljano stanje je odvisen od situacije. Scenarij 1: Ujeti modal
Takoj lahko vidite svoj modal, ujet v sloj nizke ravni, in prepoznate nadrejenega. Razširitve brskalnika Pametni razvijalci so v pomoč zgradili razširitve. Orodja, kot je ta razširitev za Chrome »CSS Stacking Context Inspector«, dodajo dodaten zavihek z-indeksa v vaša orodja za razvijalce, da vam prikažejo informacije o elementih, ki ustvarjajo kontekst zlaganja.
Razširitve IDE Težave lahko opazite celo med razvojem z razširitvijo, kot je ta za kodo VS, ki poudari morebitne težave s kontekstom zlaganja neposredno v vašem urejevalniku.
Razstavljanje in ponovno prevzemanje nadzora Ko smo ugotovili glavni vzrok, je naslednji korak, da se z njim spopademo. Obstaja več pristopov, s katerimi se lahko spopadete s to težavo, in naštel jih bom po vrstnem redu. Lahko pa izberete kogar koli na kateri koli ravni; nihče se ne more pritoževati ali ovirati drugega. Spremenite strukturo HTML To velja za optimalno rešitev. Če želite naleteti na težavo s kontekstom zlaganja, morate nekaj elementov postaviti na smešna mesta v svojem HTML-ju. Prestrukturiranje strani vam bo pomagalo preoblikovati DOM in odpraviti težavo konteksta zlaganja. Poiščite problematični element in ga odstranite iz elementa za prestrezanje v oznaki HTML. Prvi scenarij, »Ujeti modal«, lahko na primer rešimo tako, da premaknemo .modal-container iz glave in ga samostojno postavimo v element
.Ta vsebina ima z-indeks 2 in še vedno ne pokriva modala.Glava
Glavna vsebina
Ko kliknete gumb »Odpri modal«, se modal postavi pred vse ostalo, kot bi moral biti. Oglejte si scenarij peresa 1: The Trapped Modal (Solution) [forked] Shoyombo Gabriel Ayomide. PrilagoditeNadrejeni kontekst zlaganja v CSS Kaj pa, če je element tisti, ki ga ne morete premakniti, ne da bi porušili postavitev? Bolje je obravnavati težavo: starš določi kontekst. Poiščite lastnost (ali lastnosti) CSS, odgovorno za sprožitev konteksta, in jo odstranite. Če ima namen in ga ni mogoče odstraniti, dajte nadrejenemu elementu višjo vrednost indeksa z kot sorodniškim elementom, da dvigne celotno posodo. Z višjo vrednostjo z-indeksa se nadrejeni vsebnik premakne na vrh, njegovi podrejeni pa so videti bližje uporabniku. Glede na to, kar smo se naučili v scenariju »Potopljeni spustni meni«, spustnega menija ne moremo premakniti iz vrstice za krmarjenje; ne bi imelo smisla. Vendar pa lahko povečamo vrednost z-indeksa vsebnika .navbar, da bo večja od vrednosti z-indeksa elementa .content. .navbar { ozadje: #333; /* z-indeks: 1; */ z-indeks: 3; položaj: relativni; }
S to spremembo se .spustni meni zdaj prikaže pred vsebino brez težav.
Oglejte si scenarij peresa 2: Potopljeni spustni meni (rešitev) [razcepljen] Shoyomba Gabriela Ayomidea.
Poskusite s portali, če uporabljate ogrodje
V okvirih, kot sta React ali Vue, je portal funkcija, ki vam omogoča upodabljanje komponente zunaj njene običajne nadrejene hierarhije v DOM. Portali so kot naprava za teleportacijo vaših komponent. Omogočajo vam, da upodobite HTML komponente kjer koli v dokumentu (običajno naravnost v document.body), medtem ko ostane logično povezan z izvirnim nadrejenim elementom za rekvizite, stanje in dogodke. To je popolno za izogibanje pastem konteksta zlaganja, saj se upodobljeni izhod dobesedno pojavi zunaj problematičnega nadrejenega vsebnika.
ReactDOM.createPortal(
To zagotavlja, da vaša spustna vsebina ni skrita za svojim nadrejenim, tudi če ima nadrejeni overflow: skrito ali nižji indeks z. V scenariju »Izrezan namig orodja«, ki smo si ga ogledali prej, sem uporabil portal za reševanje namiga orodja pred prelivanjem: skriti posnetek tako, da sem ga postavil v telo dokumenta in ga postavil nad sprožilec znotraj vsebnika. Oglejte si 3. scenarij peresa: Odrezani opis orodja (rešitev) [razcepljen] Shoyombo Gabriel Ayomide. Predstavljamo kontekst zlaganja brez stranskih učinkov Vsi pristopi, pojasnjeni v prejšnjem razdelku, so namenjeni »odstranjevanju« elementov iz problematičnih kontekstov zlaganja, vendar obstaja nekaj situacij, ko boste dejansko potrebovali ali želeli ustvariti kontekst zlaganja. Ustvarjanje novega konteksta zlaganja je enostavno, vendar imajo vsi pristopi stranski učinek. To je, razen za uporabo izolacije: izolacija. Ko se uporabi za element, je kontekst zlaganja otrok tega elementa določen glede na vsakega otroka in znotraj tega konteksta, namesto da bi nanj vplivali elementi zunaj njega. Klasičen primer je dodelitev temu elementu negativne vrednosti, na primer z-index: -1. Predstavljajte si, da imate komponento .card. Dodati želite okrasno obliko, ki je za besedilom kartice .card, vendar na vrhu ozadja kartice. Brez konteksta zlaganja na kartici z-index: -1 pošlje obliko na dno konteksta korenskega zlaganja (celotna stran). Zaradi tega izgine za belim ozadjem kartice .card: Oglejte si Pen Negative z-index (problem) [forked] Shoyombo Gabriel Ayomide. Da bi to rešili, razglasimo izolacijo: isolate na nadrejeni kartici .card: Oglejte si Pen Negative z-index (rešitev) [forked] Shoyombo Gabriel Ayomide. Zdaj sam element .card postane kontekst zlaganja. Ko ima njegov podrejeni element – okrasna oblika, ustvarjena na psevdoelementu :before – z-indeks: -1, gre na samo dno nadrejenega konteksta zlaganja. Popolnoma leži za besedilom in na vrhu ozadja kartice, kot je predvideno. Zaključek Ne pozabite: naslednjič, ko se zdi, da je vaš z-indeks brez nadzora, je to ujet kontekst zlaganja. Reference
Kontekst zlaganja (MDN) Z-indeks in konteksti zlaganja (web.dev) »Kako ustvariti nov kontekst zlaganja z lastnostjo izolacije v CSS«, Natalie Pina "Kaj za vraga, z-index??", Josh Comeau
Dodatno branje na SmashingMag
»Upravljanje Z-indeksa CSS v velikih projektih«, Steven Frieson »Lepljive glave in elementi polne višine: zapletena kombinacija«, Philip Braunen »Upravljanje Z-indeksa v spletni aplikaciji, ki temelji na komponentah«, Pavel Pomerantsev »Lastnost Z-indeksa CSS: Celovit pogled«, Louis Lazaris
