A keni vendosur ndonjëherë z-index: 99999 në një element në CSS tuaj, dhe ai nuk del në krye të elementeve të tjerë? Një vlerë kaq e madhe duhet ta vendosë lehtësisht atë element vizualisht mbi çdo gjë tjetër, duke supozuar se të gjithë elementët e ndryshëm janë vendosur ose në një vlerë më të ulët ose nuk janë vendosur fare. Një faqe interneti zakonisht përfaqësohet në një hapësirë dy-dimensionale; megjithatë, duke aplikuar veçori specifike CSS, futet një plan imagjinar i boshtit z për të përcjellë thellësinë. Ky plan është pingul me ekranin dhe prej tij përdoruesi percepton renditjen e elementeve, njëri mbi tjetrin. Ideja prapa boshtit imagjinar z, perceptimi i përdoruesit për elementët e grumbulluar, është që vetitë CSS që e krijojnë atë të kombinohen për të formuar atë që ne e quajmë një kontekst grumbullimi. Ne do të flasim për mënyrën se si elementët janë "stivuar" në një faqe interneti, çfarë kontrollon rendin e grumbullimit dhe qasjet praktike për "zhbërjen" e elementeve kur nevojitet. Rreth Stacking Contexts Imagjinoni faqen tuaj të internetit si një tavolinë. Ndërsa shtoni elementë HTML, po vendosni copa letre, njëra pas tjetrës, në tavolinë. Pjesa e fundit e letrës e vendosur është ekuivalente me elementin HTML të shtuar së fundmi dhe qëndron mbi të gjitha letrat e tjera të vendosura përpara tij. Kjo është rrjedha normale e dokumentit, edhe për elementët e mbivendosur. Vetë tavolina përfaqëson kontekstin e grumbullimit të rrënjës, të formuar nga elementi , i cili përmban të gjitha dosjet e tjera. Tani, vetitë specifike të CSS hyjnë në lojë. Vetitë si pozicioni (me z-indeks), opaciteti, transformimi dhe përmbajtja) veprojnë si një dosje. Kjo dosje merr një element dhe të gjithë fëmijët e tij, i nxjerr nga grumbulli kryesor dhe i grupon në një nën-stivë të veçantë, duke krijuar atë që ne e quajmë kontekst grumbullimi. Për elementët e pozicionuar, kjo ndodh kur ne deklarojmë një vlerë të z-indeksit të ndryshëm nga auto. Për vetitë si opaciteti, transformimi dhe filtri, konteksti i grumbullimit krijohet automatikisht kur aplikohen vlera specifike.
Përpiquni ta kuptoni këtë: Sapo një copë letër (d.m.th., një element fëmijë) të jetë brenda një dosjeje (d.m.th., konteksti i grumbullimit të prindit), nuk mund të dalë kurrë nga ajo dosje ose të vendoset midis letrave në një dosje tjetër. Z-indeksi i tij tani është i rëndësishëm vetëm brenda dosjes së tij.
Në ilustrimin e mëposhtëm, Letra B është tani brenda kontekstit të grumbullimit të Dosjes B dhe mund të porositet vetëm me letra të tjera në dosje.
Imagjinoni, nëse dëshironi, që keni dy dosje në tryezën tuaj:
.folder-a { z-indeksi: 1; } .folder-b { z-indeksi: 2; }
Le të përditësojmë pak shënimin. Brenda Dosjes A është një faqe e veçantë, z-index: 9999. Brenda Dosjes B është një faqe e thjeshtë, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Cila faqe është në krye? Është faqja .plain në Dosjen B. Shfletuesi injoron letrat e fëmijëve dhe grumbullon dy dosjet së pari. Ai sheh dosjen B (z-indeksi: 2) dhe e vendos atë në krye të dosjes A (z-indeksi: 1) sepse ne e dimë se dy është më e madhe se një. Ndërkohë, faqja .special-page e vendosur në z-index: 9999 është në fund të stivit edhe pse z-indeksi i saj është vendosur në vlerën më të lartë të mundshme. Kontekstet e grumbullimit mund të vendosen gjithashtu (dosjet brenda dosjeve), duke krijuar një "pemë familjare". I njëjti parim vlen: një fëmijë nuk mund t'i shpëtojë kurrë dosjes së prindërve. Tani që e kuptoni sesi kontekstet e grumbullimit sillen si dosje që grupojnë dhe rirenditin shtresat, ia vlen të pyesni: pse disa veçori – si transformimi dhe opaciteti – krijojnë kontekste të reja grumbullimi? Këtu është gjëja: këto veti nuk krijojnë kontekste grumbullimi për shkak të pamjes së tyre; ata e bëjnë këtë për shkak të mënyrës se si funksionon shfletuesi nën kapuç. Kur aplikoni transformimin, opacitetin, filtrin ose perspektivën, po i thoni shfletuesit: "Hej, ky element mund të lëvizë, rrotullohet ose zbehet, prandaj jini gati!"
Kur përdorni këto veti, shfletuesi krijon një kontekst të ri grumbullimi për të menaxhuar paraqitjen në mënyrë më efikase. Kjo i lejon shfletuesit të trajtojë animacionet, transformimet dhe efektet vizuale në mënyrë të pavarur, duke reduktuar nevojën për të rillogaritur mënyrën se si këta elementë ndërveprojnë me pjesën tjetër të faqes. Mendoni se si shfletuesi thotë: "Unë do ta trajtoj këtë dosje veç e veç, në mënyrë që të mos më duhet ta riorganizoj të gjithë tavolinën sa herë që diçka brenda saj ndryshon." Por kanjë efekt anësor. Pasi shfletuesi ngre një element në shtresën e tij, ai duhet të "rrafshojë" gjithçka brenda tij, duke krijuar një kontekst të ri grumbullimi. Është si të heqësh një dosje nga tavolina për ta trajtuar veçmas; çdo gjë brenda asaj dosjeje grupohet dhe shfletuesi tani e trajton atë si një njësi të vetme kur vendos se çfarë qëndron mbi atë. Pra, edhe pse vetitë e transformimit dhe të tejdukshmërisë mund të mos duket se ndikojnë në mënyrën se si elementët grumbullohen vizualisht, ato ndikojnë, dhe kjo është për optimizimin e performancës. Disa veti të tjera CSS gjithashtu mund të krijojnë kontekste grumbullimi për arsye të ngjashme. MDN ofron një listë të plotë nëse doni të gërmoni më thellë. Ka mjaft, gjë që vetëm ilustron se sa e lehtë është të krijosh pa dashje një kontekst grumbullimi pa e ditur atë. Problemi i "zhbërjes së stivës". Problemet e grumbullimit mund të lindin për shumë arsye, por disa janë më të zakonshme se të tjerat. Komponentët modalë janë një model klasik sepse kërkojnë ndërrimin e komponentit për të "hapur" në një shtresë të sipërme mbi të gjithë elementët e tjerë, më pas duke e hequr atë nga shtresa e sipërme kur është "mbyllur". Kam shumë besim se të gjithë ne kemi hasur në një situatë ku hapim një modal dhe, për çfarëdo arsye, nuk shfaqet. Nuk është se nuk u hap siç duhet, por se është jashtë pamjes në një shtresë më të ulët të kontekstit të grumbullimit. Kjo ju lë të pyesni veten "si ka mundësi?" që kur keni vendosur:
.mbivendosje { pozicioni: fiks; /* krijon kontekstin e grumbullimit */ z-indeksi: 1; /* vendos elementin në një shtresë mbi çdo gjë tjetër */ inset: 0; gjerësia: 100%; lartësia: 100vh; vërshoj: i fshehur; ngjyra e sfondit: #00000080; }
Kjo duket e saktë, por nëse elementi prind që përmban aktivizuesin modal është një element fëmijë brenda një elementi tjetër prind, i cili gjithashtu është vendosur në indeksin z: 1, që teknikisht e vendos modalin në një nënshtresë të errësuar nga dosja kryesore. Le të shohim atë skenar specifik dhe disa gracka të tjera të zakonshme të kontekstit të grumbullimit. Unë mendoj se do të shihni jo vetëm se sa e lehtë është të krijosh pa dashje kontekste të grumbullimit, por edhe se si t'i keqmenaxhosh ato. Gjithashtu, mënyra se si ktheheni në një gjendje të menaxhuar varet nga situata. Skenari 1: Modali i bllokuar
Ju mund të shihni menjëherë modalitetin tuaj të bllokuar në një shtresë të nivelit të ulët dhe të identifikoni prindin. Zgjerimet e shfletuesit Zhvilluesit inteligjentë kanë ndërtuar shtesa për të ndihmuar. Mjete si kjo shtesë e Chrome "CSS Stacking Context Inspector" shtojnë një skedë shtesë të indeksit z në DevTools tuaj për t'ju treguar informacione rreth elementeve që krijojnë një kontekst grumbullimi.
Zgjerimet IDE Ju madje mund të dalloni problemet gjatë zhvillimit me një shtesë si kjo për VS Code, e cila thekson problemet e mundshme të kontekstit të grumbullimit direkt në redaktorin tuaj.
Shkarkimi dhe rifitimi i kontrollit Pasi të kemi identifikuar shkakun rrënjësor, hapi tjetër është ta trajtojmë atë. Ka disa mënyra që mund të përdorni për të trajtuar këtë problem, dhe unë do t'i rendis ato me radhë. Megjithatë, ju mund të zgjidhni cilindo në çdo nivel; askush nuk mund të ankohet apo pengojë tjetrin. Ndryshoni Strukturën HTML Kjo konsiderohet zgjidhja optimale. Që të hasni në një problem të kontekstit të grumbullimit, duhet të keni vendosur disa elementë në pozicione qesharake brenda HTML-së tuaj. Ristrukturimi i faqes do t'ju ndihmojë të riformoni DOM-in dhe të eliminoni problemin e kontekstit të grumbullimit. Gjeni elementin problematik dhe hiqeni atë nga elementi i kurthit në shënimin HTML. Për shembull, ne mund të zgjidhim skenarin e parë, "Modal i bllokuar", duke lëvizur kontejnerin .modal jashtë kokës dhe duke e vendosur atë në elementin
më vete.Kjo përmbajtje ka një z-indeks 2 dhe ende nuk do të mbulojë modalin.Titulli
Përmbajtja kryesore
Kur klikoni butonin "Open Modal", modali pozicionohet përpara çdo gjëje tjetër siç supozohet të jetë. Shih Skenarin e Penës 1: Modali i Bllokuar (Zgjidhja) [e pirun] nga Shoyombo Gabriel Ayomide. RregulloniKonteksti i grumbullimit të prindërve në CSS Po nëse elementi është ai që nuk mund të lëvizni pa prishur paraqitjen? Është më mirë ta trajtojmë çështjen: prindi vendos kontekstin. Gjeni vetinë (ose vetitë) CSS përgjegjëse për aktivizimin e kontekstit dhe hiqni atë. Nëse ka një qëllim dhe nuk mund të hiqet, jepini prindit një vlerë më të lartë të z-indeksit sesa elementët e tij vëllezër për të ngritur të gjithë kontejnerin. Me një vlerë më të lartë të indeksit z, kontejneri prind zhvendoset në krye dhe fëmijët e tij duken më afër përdoruesit. Bazuar në atë që mësuam në skenarin "The Submerged Dropdown", ne nuk mund ta zhvendosim listën me zbritje jashtë shiritit të navigimit; nuk do të kishte kuptim. Megjithatë, ne mund të rrisim vlerën e z-indeksit të kontejnerit .navbar që të jetë më e madhe se vlera e z-indeksit të elementit .content. .navbar { sfond: #333; /* z-indeksi: 1; */ z-indeksi: 3; pozicioni: i afërm; }
Me këtë ndryshim, menyja .dropdown tani shfaqet para përmbajtjes pa ndonjë problem.
Shih Skenarin 2 të Penës: Dropdown e zhytur (Zgjidhja) [përbërë] nga Shoyombo Gabriel Ayomide.
Provoni portalet, nëse përdorni një kornizë
Në kornizat si React ose Vue, një Portal është një veçori që ju lejon të jepni një komponent jashtë hierarkisë së tij normale prindërore në DOM. Portalet janë si një pajisje teleportimi për komponentët tuaj. Ato ju lejojnë të jepni HTML-në e një komponenti kudo në dokument (zakonisht direkt në document.body) duke e mbajtur atë logjikisht të lidhur me prindin e tij origjinal për rekuizita, gjendje dhe ngjarje. Kjo është e përkryer për t'i shpëtuar kurtheve të kontekstit të grumbullimit pasi dalja e dhënë shfaqet fjalë për fjalë jashtë kontejnerit problematik prind.
ReactDOM.createPortal(
Kjo siguron që përmbajtja e listës suaj të mos fshihet pas prindit të saj, edhe nëse prindi ka tejmbushje: të fshehur ose një z-indeks më të ulët. Në skenarin "The Clipped Tooltip" që shikuam më herët, përdora një Portal për të shpëtuar këshillën e veglave nga tejmbushja: klip i fshehur duke e vendosur në trupin e dokumentit dhe duke e pozicionuar mbi këmbëzën brenda kontejnerit. Shihni Skenarin 3 të stilolapsit: Këshilla e veglave të prera (Zgjidhja) [e pirun] nga Shoyombo Gabriel Ayomide. Prezantimi i kontekstit të grumbullimit pa efekte anësore Të gjitha qasjet e shpjeguara në seksionin e mëparshëm kanë për qëllim "zhbërjen" e elementeve nga kontekstet problematike të grumbullimit, por ka disa situata ku në të vërtetë do t'ju duhet ose dëshironi të krijoni një kontekst grumbullimi. Krijimi i një konteksti të ri grumbullimi është i lehtë, por të gjitha qasjet vijnë me një efekt anësor. Kjo është, përveç përdorimit të izolimit: izoloni. Kur zbatohet për një element, konteksti i grumbullimit të fëmijëve të atij elementi përcaktohet në lidhje me secilin fëmijë dhe brenda atij konteksti, në vend që të ndikohet nga elementë jashtë tij. Një shembull klasik është caktimi i atij elementi një vlerë negative, si z-indeksi: -1. Imagjinoni që keni një komponent .card. Ju dëshironi të shtoni një formë dekorative që qëndron prapa tekstit të kartës ., por në krye të sfondit të kartës. Pa një kontekst grumbullimi në kartë, z-index: -1 e dërgon formën në fund të kontekstit të grumbullimit rrënjë (të gjithë faqen). Kjo e bën atë të zhduket pas sfondit të bardhë të kartës .: Shih indeksin z-negativ të stilolapsit (problemi) [i pirun] nga Shoyombo Gabriel Ayomide. Për ta zgjidhur këtë, ne deklarojmë izolim: izoloni në kartën prind .: Shih indeksin z-negativ të stilolapsit (zgjidhje) [përforcuar] nga Shoyombo Gabriel Ayomide. Tani, vetë elementi .card bëhet një kontekst grumbullimi. Kur elementi i tij fëmijë - forma dekorative e krijuar në elementin :para pseudo- ka z-indeks: -1, ai shkon në fund të kontekstit të grumbullimit të prindit. Ajo qëndron në mënyrë të përkryer pas tekstit dhe në krye të sfondit të kartës, siç synohet. konkluzioni Mbani mend: herën tjetër që indeksi juaj z të duket jashtë kontrollit, është një kontekst grumbullimi i bllokuar. Referencat
Konteksti i grumbullimit (MDN) Z-indeksi dhe kontekstet e grumbullimit (web.dev) "Si të krijoni një kontekst të ri grumbullimi me vetinë e izolimit në CSS", Natalie Pina “What The Heck, z-index??”, Josh Comeau
Leximi i mëtejshëm në SmashingMag
"Menaxhimi i CSS Z-Index në projekte të mëdha", Steven Frieson "Kakëza ngjitëse dhe elementë me lartësi të plotë: një kombinim i ndërlikuar", Philip Braunen "Menaxhimi i indeksit Z në një aplikacion uebi të bazuar në komponentë", Pavel Pomerantsev "Properti CSS Z-Index: Një vështrim gjithëpërfshirës", Louis Lazaris
