Ar kada nors savo CSS elementui nustatėte z-index: 99999 ir jis nepatenka į kitus elementus? Didelė vertė turėtų lengvai vizualiai įdėti tą elementą virš bet ko kito, darant prielaidą, kad visų skirtingų elementų vertė yra mažesnė arba visai nenustatyta. Tinklalapis paprastai vaizduojamas dvimatėje erdvėje; tačiau pritaikius specifines CSS savybes, įvedama įsivaizduojama z ašies plokštuma, perteikianti gylį. Ši plokštuma yra statmena ekranui, o iš jos vartotojas suvokia elementų tvarką vienas ant kito. Įsivaizduojamos z ašies, vartotojo suvokimo apie sukrautus elementus, idėja yra ta, kad ją sukuriančios CSS savybės susijungia ir sudaro tai, ką vadiname krovimo kontekstu. Kalbėsime apie tai, kaip tinklalapyje elementai yra „sukrauti“, kas valdo sudėjimo tvarką ir praktinius būdus, kaip prireikus „iškrauti“ elementus. Apie kontekstų krovimą Įsivaizduokite savo tinklalapį kaip stalą. Pridėdami HTML elementus, vieną po kito ant stalo dedate popieriaus gabalus. Paskutinis įdėtas popieriaus lapas yra lygus paskutiniam pridėtam HTML elementui ir yra ant visų kitų prieš jį padėtų popierių. Tai yra įprastas dokumentų srautas, net ir įdėtiems elementams. Pats stalas yra šakninis krovimo kontekstas, sudarytas iš elemento, kuriame yra visi kiti aplankai. Dabar pradedamos naudoti konkrečios CSS savybės. Tokios ypatybės kaip padėtis (su z indeksu), neskaidrumas, transformacija ir talpa) veikia kaip aplankas. Šis aplankas paima elementą ir visus jo antrinius elementus, ištraukia juos iš pagrindinio krūvos ir sugrupuoja į atskirą antrinį krūvą, sukurdamas tai, ką vadiname krovimo kontekstu. Išdėstytų elementų atveju tai atsitinka, kai deklaruojame kitokią z indekso reikšmę nei automatinis. Savybėms, pvz., neskaidrumui, transformavimui ir filtrams, krovimo kontekstas sukuriamas automatiškai, kai taikomos konkrečios reikšmės.
Pabandykite tai suprasti: kai popieriaus lapas (t. y. antrinis elementas) yra aplanko viduje (t. y. pirminio sudėjimo kontekste), jis niekada negali išeiti iš to aplanko arba būti įdėtas tarp popierių kitame aplanke. Jo z indeksas dabar aktualus tik jo paties aplanke.
Toliau pateiktoje iliustracijoje popierius B dabar yra aplanko B krovimo kontekste ir jį galima užsisakyti tik kartu su kitais aplanke esančiais popieriais.
Įsivaizduokite, jei norite, kad jūsų darbalaukyje yra du aplankai:
.folder-a { z indeksas: 1; } .folder-b { z-index: 2; }
Šiek tiek atnaujinkime žymėjimą. Vidinis aplankas A yra specialus puslapis, z indeksas: 9999. Vidinis aplankas B yra paprastas puslapis, z indeksas: 5.
.special-page { z-index: 9999; } .paprastas puslapis { z indeksas: 5; }
Kuris puslapis yra viršuje? Tai .paprastas puslapis B aplanke. Naršyklė nepaiso antrinių dokumentų ir pirmiausia sukrauna du aplankus. Jis mato aplanką B (z indeksas: 2) ir deda jį ant aplanko A (z indeksas: 1), nes žinome, kad du yra didesni už vieną. Tuo tarpu .special-page nustatytas į z indeksą: 9999 puslapis yra krūvos apačioje, nors jo z indeksas nustatytas kaip didžiausia galima reikšmė. Kūrimo kontekstai taip pat gali būti įdėti (aplankai aplankuose), sukuriant „šeimos medį“. Galioja tas pats principas: vaikas niekada negali pabėgti iš tėvų aplanko. Dabar, kai supratote, kaip krovimo kontekstai elgiasi kaip aplankai, kurie grupuoja ir pertvarko sluoksnius, verta paklausti: kodėl tam tikros savybės, pvz., transformacija ir neskaidrumas, sukuria naujus krovimo kontekstus? Štai dalykas: šios savybės nesukuria krovimo kontekstų dėl to, kaip jie atrodo; jie tai daro dėl to, kaip naršyklė veikia po gaubtu. Kai taikote transformaciją, neskaidrumą, filtrą ar perspektyvą, sakote naršyklei: „Ei, šis elementas gali judėti, pasisukti arba išnykti, todėl būkite pasiruošę!
Kai naudojate šias ypatybes, naršyklė sukuria naują krovimo kontekstą, kad būtų galima efektyviau valdyti atvaizdavimą. Tai leidžia naršyklei savarankiškai tvarkyti animacijas, transformacijas ir vaizdinius efektus, todėl nereikia perskaičiuoti, kaip šie elementai sąveikauja su likusia puslapio dalimi. Pagalvokite apie tai taip, kaip naršyklė sako: „Aš tvarkysiu šį aplanką atskirai, kad man nereikėtų pertvarkyti viso stalo kiekvieną kartą, kai kažkas jame pasikeičia“. Bet yrašalutinis poveikis. Kai naršyklė pakelia elementą į savo sluoksnį, ji turi „išlyginti“ viską, kas yra jame, sukurdama naują krovimo kontekstą. Tai tarsi aplanko nuėmimas nuo stalo, kad jį tvarkytumėte atskirai; viskas, kas yra tame aplanke, sugrupuojama, o naršyklė, spręsdama, kas bus ant ko, dabar traktuoja jį kaip vieną vienetą. Taigi, nors transformacijos ir nepermatomumo savybės gali neturėti įtakos elementų vizualiniam sudėjimui, jie daro, ir tai yra skirta našumui optimizuoti. Keletas kitų CSS ypatybių taip pat gali sukurti krovimo kontekstus dėl panašių priežasčių. MDN pateikia visą sąrašą, jei norite pasigilinti. Jų yra nemažai, o tai tik iliustruoja, kaip lengva netyčia sukurti krovimo kontekstą to nežinant. „Išpakavimo“ problema Sukrovimo problemos gali kilti dėl daugelio priežasčių, tačiau kai kurios iš jų yra dažnesnės nei kitos. Modaliniai komponentai yra klasikinio modelio, nes juos reikia perjungti, kad komponentas „atidarytų“ viršutiniame sluoksnyje, esančiame virš visų kitų elementų, tada pašalinamas iš viršutinio sluoksnio, kai jis yra „uždarytas“. Esu gana įsitikinęs, kad visi esame atsidūrę tokioje situacijoje, kai atidarome modalą ir dėl kokios nors priežasties jis neatsiranda. Tai ne tai, kad jis neatsidarė tinkamai, o tai, kad jis nėra matomas apatiniame krovimo konteksto sluoksnyje. Dėl to kyla klausimas: „Kaip taip? nuo tada, kai nustatėte:
.overlay { padėtis: fiksuota; /* sukuria krovimo kontekstą */ z indeksas: 1; /* perkelia elementą į sluoksnį virš visko */ įdėklas: 0; plotis: 100%; aukštis: 100vh; perpildymas: paslėptas; fono spalva: #00000080; }
Tai atrodo teisinga, bet jei pagrindinis elementas, kuriame yra modalinis aktyviklis, yra antrinis elementas kitame pirminiame elemente, kuris taip pat nustatytas į z indeksą: 1, tai techniškai modalą patalpina į pagrindinio aplanko uždengtą posluoksnį. Pažvelkime į tą konkretų scenarijų ir keletą kitų įprastų krovimo konteksto spąstų. Manau, pamatysite ne tik tai, kaip lengva netyčia sukurti krovimo kontekstus, bet ir kaip juos netinkamai valdyti. Be to, tai, kaip grįšite į valdomą būseną, priklauso nuo situacijos. 1 scenarijus: įstrigęs modalas
Galite iš karto pamatyti savo modalą įstrigusį žemo lygio sluoksnyje ir identifikuoti tėvą. Naršyklės plėtiniai Išmanieji kūrėjai sukūrė plėtinius, kad padėtų. Įrankiai, tokie kaip šis „CSS Stacking Context Inspector“, „Chrome“ plėtinys prideda papildomą „z-index“ skirtuką prie „DevTools“, kad būtų rodoma informacija apie elementus, kurie sukuria krovimo kontekstą.
IDE plėtiniai Jūs netgi galite pastebėti problemas kurdami naudodami plėtinį, kaip šis, skirtą VS kodui, kuris išryškina galimas konteksto problemas tiesiogiai redaktoriuje.
Išpakavimas ir kontrolės atgavimas Nustačius pagrindinę priežastį, kitas žingsnis yra ją išspręsti. Yra keletas būdų, kaip išspręsti šią problemą, ir aš juos išvardysiu eilės tvarka. Vis dėlto galite pasirinkti bet kurį asmenį bet kuriuo lygiu; niekas negali skųstis ar trukdyti kitam. Pakeiskite HTML struktūrą Tai laikoma optimaliu pataisymu. Kad galėtumėte susidurti su krovimo konteksto problema, kai kuriuos elementus turite įdėti į juokingas vietas savo HTML. Puslapio pertvarka padės pertvarkyti DOM ir pašalinti krovimo konteksto problemą. Raskite probleminį elementą ir pašalinkite jį iš gaudymo elemento HTML žymėjime. Pavyzdžiui, galime išspręsti pirmąjį scenarijų „The Trapped Modal“, iškeldami .modal-container iš antraštės ir įdėdami jį į elementą
.Šio turinio z indeksas yra 2 ir jis vis tiek neapims modalo.Antraštė
Pagrindinis turinys
Kai spustelėsite mygtuką „Atidaryti modalą“, modalas yra priešais viską, kaip ir turėtų būti. Žr. 1 rašiklio scenarijų: įstrigęs modalas (sprendimas), kurį sukūrė Shoyombo Gabriel Ayomide. SureguliuokiteParent Stacking kontekstas CSS Ką daryti, jei elementas yra toks, kurio negalite perkelti nepažeisdami išdėstymo? Geriau spręsti problemą: tėvai nustato kontekstą. Raskite CSS ypatybę (ar ypatybes), atsakingas už konteksto suaktyvinimą, ir pašalinkite ją. Jei jis turi tikslą ir negali būti pašalintas, suteikite pirminiam elementui didesnę z indekso reikšmę nei jo brolio elementai, kad pakeltumėte visą konteinerį. Esant didesnei z indekso vertei, pirminis sudėtinis rodinys perkeliamas į viršų, o jo antriniai elementai atrodo arčiau vartotojo. Remdamiesi tuo, ką sužinojome scenarijuje „Paskandintas išskleidžiamasis meniu“, negalime perkelti išskleidžiamojo meniu iš naršymo juostos; nebūtų prasmės. Tačiau galime padidinti .navbar sudėtinio rodinio z indekso reikšmę, kad ji būtų didesnė nei .content elemento z indekso reikšmė. .navbar { fonas: #333; /* z indeksas: 1; */ z indeksas: 3; padėtis: santykinė; }
Atlikus šį pakeitimą, .išskleidžiamasis meniu dabar rodomas prieš turinį be jokių problemų. Žr. 2 rašiklio scenarijų: Panardinamasis išskleidžiamasis meniu (sprendimas), kurį sukūrė Shoyombo Gabriel Ayomide. Išbandykite portalus, jei naudojate sistemą Tokiose sistemose kaip „React“ arba „Vue“ portalas yra funkcija, leidžianti pateikti komponentą, nepatenkantį į jo įprastą pirminę hierarchiją DOM. Portalai yra tarsi jūsų komponentų teleportacijos įrenginys. Jie leidžia pateikti komponento HTML bet kurioje dokumento vietoje (paprastai tiesiai į document.body), išlaikant jį logiškai susietą su pirminiu rekvizitu, būsena ir įvykiais. Tai puikiai tinka norint išvengti konteksto spąstų, nes pateikta išvestis tiesiogine prasme pasirodo už probleminio pirminio konteinerio ribų. ReactDOM.createPortal( <Įrankio patarimas />, dokumentas.kūnas );
Taip užtikrinama, kad išskleidžiamojo meniu turinys nebūtų paslėptas už pirminio turinio, net jei pirminis turinys yra perpildytas: paslėptas arba mažesnis z indeksas. Scenarijuje „Nukirptas patarimas“, kurį nagrinėjome anksčiau, naudojau portalą, kad išgelbėčiau patarimą nuo perpildymo: paslėptas klipas įdėjus jį į dokumento korpusą ir padėdamas virš paleidimo talpykloje. Žr. 3 rašiklio scenarijų: nukirptas patarimas (sprendimas), kurį sukūrė Shoyombo Gabriel Ayomide. Pristatome krovimo kontekstą be šalutinių poveikių Visi ankstesniame skyriuje aprašyti metodai yra skirti elementams „atskirti“ iš probleminių krovimo kontekstų, tačiau yra tam tikrų situacijų, kai jums iš tikrųjų reikės arba norite sukurti krovimo kontekstą. Sukurti naują krovimo kontekstą lengva, tačiau visi metodai turi šalutinį poveikį. Tai yra, išskyrus izoliacijos naudojimą: izoliuoti. Pritaikius elementui, šio elemento vaikų sudėties kontekstas nustatomas atsižvelgiant į kiekvieną vaiką ir tame kontekste, o ne veikiamas elementų, esančių už jo ribų. Klasikinis pavyzdys yra tam elementui priskirti neigiamą reikšmę, pvz., z indeksą: -1. Įsivaizduokite, kad turite .card komponentą. Norite pridėti dekoratyvinę formą, kuri būtų už .card teksto, bet ant kortelės fono. Neturėdamas kortelės sudėtinio konteksto, z-index: -1 siunčia figūrą į šakninio kaupimo konteksto apačią (visą puslapį). Dėl to jis išnyksta už balto .card fono: Žr. rašiklio neigiamą z indeksą (problema), kurį sukūrė Shoyombo Gabriel Ayomide. Norėdami tai išspręsti, paskelbiame izoliaciją: izoliuojame pirminėje .card: Žr. „Pen Negative z-index“ (tirpalas), kurį sukūrė Shoyombo Gabriel Ayomide. Dabar pats .card elementas tampa krovimo kontekstu. Kai jo antrinis elementas – dekoratyvinė figūra, sukurta :prieš pseudoelementą – turi z indeksą: -1, jis patenka į patį pirminio krūvio konteksto apačią. Jis puikiai tinka už teksto ir kortelės fono viršuje, kaip numatyta. Išvada Atminkite: kai kitą kartą jūsų z indeksas atrodys nekontroliuojamas, tai yra įstrigęs kaupimo kontekstas. Nuorodos
Kūrimo kontekstas (MDN) Z indeksas ir krovimo kontekstai (web.dev) „Kaip sukurti naują krovimo kontekstą naudojant izoliavimo ypatybę CSS“, Natalie Pina „What The Heck, z-index?“, Joshas Comeau
Tolesnis skaitymas apie SmashingMag
„CSS Z indekso valdymas dideliuose projektuose“, Stevenas Friesonas „Lipnios antraštės ir viso aukščio elementai: sudėtingas derinys“, Philipas Braunenas „Z indekso valdymas komponentais pagrįstoje žiniatinklio programoje“, Pavelas Pomerancevas „Z indekso CSS nuosavybė: visapusiška išvaizda“, Louis Lazaris
