Kas olete kunagi oma CSS-is mõnele elemendile määranud z-indeksi: 99999 ja see ei tule välja teiste elementide kohal? Nii suur väärtus peaks asetama selle elemendi visuaalselt kõige muu peale, eeldades, et kõik erinevad elemendid on seatud madalamale väärtusele või ei ole üldse määratud. Veebileht on tavaliselt kujutatud kahemõõtmelises ruumis; kuid spetsiifiliste CSS-i omaduste rakendamisel võetakse sügavuse edastamiseks kasutusele kujuteldav z-telje tasapind. See tasapind on ekraaniga risti ja sellelt tajub kasutaja elementide järjestust üksteise peal. Kujutletava z-telje, kasutaja arusaam virnastatud elementidest, idee seisneb selles, et selle loovad CSS-i atribuudid ühinevad virnastamiskontekstiks. Räägime sellest, kuidas elemente veebilehele virnatakse, mis juhib virnastamisjärjekorda ja praktilistest lähenemisviisidest elementide vajaduse korral lahtipakkimiseks. Kontekstide virnastamise kohta Imagine your webpage as a desk. HTML-i elemente lisades asetate üksteise järel lauale paberitükke. Viimane asetatud paberitükk on samaväärne viimati lisatud HTML-i elemendiga ja see asub kõigi teiste selle ette asetatud paberite peal. See on tavaline dokumendivoog, isegi pesastatud elementide puhul. Töölaud ise esindab juurvirnastamise konteksti, mille moodustab element , mis sisaldab kõiki teisi kaustu. Now, specific CSS properties come into play. Sellised omadused nagu asukoht (z-indeksiga), läbipaistmatus, teisendus ja sisaldamine) toimivad nagu kaust. See kaust võtab elemendi ja kõik selle alad, eraldab need põhivirust ja rühmitab need eraldi alamvirna, luues nn virnastamiskonteksti. Positsioneeritud elementide puhul juhtub see siis, kui deklareerime z-indeksi väärtuse, mis pole auto. Selliste omaduste jaoks nagu läbipaistmatus, teisendus ja filter luuakse virnastamiskontekst automaatselt, kui rakendatakse konkreetseid väärtusi.
Proovige seda mõista: kui paberitükk (st alamelement) on kaustas (st vanema virnastamiskontekstis), ei saa see kunagi sellest kaustast väljuda ega asetada teise kausta paberite vahele. Selle z-indeks on nüüd asjakohane ainult tema enda kaustas.
Alloleval joonisel on paber B nüüd kausta B virnastamise kontekstis ja seda saab tellida ainult koos teiste kaustas olevate paberitega.
Kujutage ette, et teie laual on kaks kausta:
.kaust-a { z-indeks: 1; } .kaust-b { z-indeks: 2; }
Let’s update the markup a bit. Kausta A sees on spetsiaalne leht, z-indeks: 9999. Kausta B sees on tavaline leht, z-indeks: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Milline leht on üleval? See on .plain-leht kaustas B. Brauser ignoreerib alampabereid ja virnastab need kaks kausta esimesena. See näeb kausta B (z-indeks: 2) ja asetab selle kausta A kohale (z-indeks: 1), sest me teame, et kaks on suurem kui üks. Samal ajal on .special-leht seatud väärtusele z-index: 9999 leht virna allosas, kuigi selle z-indeks on seatud kõrgeimale võimalikule väärtusele. Kontekstide virnastamise saab ka pesastada (kaustade sees olevad kaustad), luues "perepuu". Kehtib sama põhimõte: laps ei pääse kunagi oma vanemate kaustast. Nüüd, kui saate aru, kuidas virnastamiskontekstid käituvad nagu kaustad, mis rühmitavad ja järjestavad kihte ümber, tasub küsida: miks loovad teatud omadused (nt teisendus ja läbipaistmatus) uusi virnastamiskontekste? Siin on asi: need omadused ei loo virnastamiskontekste nende välimuse tõttu; nad teevad seda selle tõttu, kuidas brauser kapoti all töötab. Kui rakendate teisendust, läbipaistmatust, filtrit või perspektiivi, ütlete brauserile: "Hei, see element võib liikuda, pöörata või tuhmuda, nii et olge valmis!"
Nende atribuutide kasutamisel loob brauser uue virnastamiskonteksti, et renderdamist tõhusamalt hallata. See võimaldab brauseril animatsioone, teisendusi ja visuaalseid efekte iseseisvalt käsitleda, vähendades vajadust ümber arvutada, kuidas need elemendid ülejäänud lehe osaga suhtlevad. Mõelge sellele nii, nagu ütleb brauser: "Ma käsitlen seda kausta eraldi, et ma ei peaks kogu töölauda iga kord ümber korraldama, kui selles midagi muutub." Aga seal ona side effect. Kui brauser tõstab elemendi oma kihti, peab see kõik selles olevad "tasastama", luues uue virnastamiskonteksti. See on nagu kausta laualt eemaldamine, et seda eraldi käsitseda; kõik selles kaustas sisalduv rühmitatakse ja brauser käsitleb seda nüüd ühe üksusena, kui otsustab, mis mille peal asub. Ehkki teisendus- ja läbipaistmatuse omadused ei pruugi mõjutada elementide visuaalset virnastumist, teevad nad seda ja see on mõeldud jõudluse optimeerimiseks. Ka mitmed teised CSS-i atribuudid võivad sarnastel põhjustel virnastamiskontekste luua. MDN pakub täielikku nimekirja, kui soovite süveneda. Neid on üsna palju, mis illustreerib vaid seda, kui lihtne on tahtmatult virnastamiskonteksti luua, seda teadmata. Probleem "lahtipakkimine". Virnastamisprobleemid võivad tekkida mitmel põhjusel, kuid mõned neist on tavalisemad kui teised. Modaalsed komponendid on klassikaline muster, kuna need nõuavad komponendi ümberlülitamist nii, et see avaneks ülemises kihis kõigi teiste elementide kohal, ja seejärel eemaldage see ülemisest kihist, kui see on "suletud". Olen üsna kindel, et me kõik oleme sattunud olukorda, kus avame modaali ja seda mingil põhjusel ei ilmu. Asi pole selles, et see ei avanenud korralikult, vaid selles, et see on virnastamiskonteksti alumises kihis vaateväljast väljas. See paneb sind mõtlema "kuidas nii?" since you set:
.overlay { position: fixed; /* loob virnastamise konteksti */ z-index: 1; /* paneb elemendi kõigest muust kõrgemale kihile */ inset: 0; laius: 100%; height: 100vh; ülevool: peidetud; taustavärv: #00000080; }
See näib õige, kuid kui modaalset päästikut sisaldav vanemelement on alamelement teises vanemelemendis, mis on samuti seatud z-indeksiks: 1, paigutab see modaali tehniliselt põhikausta poolt varjatud alamkihti. Vaatame seda konkreetset stsenaariumi ja mõnda muud tavalist virnastamiskonteksti lõksu. Arvan, et näete mitte ainult seda, kui lihtne on kogemata virnastamiskontekste luua, vaid ka seda, kuidas neid valesti hallata. Samuti sõltub olukorrast see, kuidas te juhitud olekusse naasete. 1. stsenaarium: lõksusmodaal
Näete kohe, et teie modaal on madalal tasemel lõksus, ja tuvastate vanema. Browser Extensions Nutikad arendajad on abistamiseks loonud laiendusi. Sellised tööriistad nagu see Chrome'i laiendus „CSS Stacking Context Inspector” lisavad teie DevToolsile täiendava z-indeksi vahekaardi, et näidata teavet virnastamiskonteksti loovate elementide kohta.
IDE laiendused Saate isegi arenduse ajal probleeme märgata sellise laiendusega nagu see VS Code jaoks, mis tõstab esile võimalikud virnastamiskonteksti probleemid otse teie redaktoris.
Lahtipakkimine ja kontrolli taastamine Pärast algpõhjuse tuvastamist on järgmine samm sellega tegelemine. Selle probleemi lahendamiseks saate kasutada mitut lähenemisviisi ja ma loetlen need järjekorras. Siiski saate valida ükskõik kelle igal tasemel; keegi ei saa teist kurta ega takistada. Muutke HTML-i struktuuri Seda peetakse optimaalseks lahenduseks. Virnastamiskonteksti probleemi lahendamiseks peate olema paigutanud mõned elemendid oma HTML-is naljakatele kohtadele. Lehe ümberstruktureerimine aitab teil DOM-i ümber kujundada ja kõrvaldada virnastamiskonteksti probleemi. Otsige üles probleemne element ja eemaldage see HTML-i märgistuses püüniselemendist. Näiteks saame lahendada esimese stsenaariumi "The Trapped Modal", teisaldades .modal-konteineri päisest välja ja asetades selle üksi elementi
.Selle sisu z-indeks on 2 ja see ei hõlma ikkagi modaali.Päis
Main Content
Kui klõpsate nuppu "Ava modaal", asetatakse modaal kõige muu ette nii, nagu see peaks olema. Vaadake pliiatsi stsenaariumi 1: lõksu jäänud modaal (lahendus) [kahveldatud], autor Shoyombo Gabriel Ayomide. Adjust TheParent Virnastamise kontekst CSS-is Mis siis, kui element on selline, mida te ei saa paigutust rikkumata liigutada? Parem on probleemiga tegeleda: vanem määrab konteksti. Otsige üles CSS-i atribuut (või atribuudid), mis vastutavad konteksti käivitamise eest, ja eemaldage see. Kui sellel on otstarve ja seda ei saa eemaldada, andke vanemale kogu konteineri tõstmiseks suurem z-indeksi väärtus kui tema sõsarelementidel. Kõrgema z-indeksi väärtusega liigub ülemkonteiner ülaossa ja selle alamkonteiner kuvatakse kasutajale lähemal. Selle põhjal, mida õppisime „Sukeldunud rippmenüü” stsenaariumis, ei saa me rippmenüüd navigeerimisribalt välja teisaldada. sellel poleks mõtet. Siiski saame suurendada .navbar konteineri z-indeksi väärtust nii, et see oleks suurem elemendi .content z-indeksi väärtusest. .navbar { taust: #333; /* z-indeks: 1; */ z-indeks: 3; asend: suhteline; }
Selle muudatusega ilmub rippmenüü nüüd sisu ette ilma probleemideta.
Vaadake pliiatsi stsenaariumit 2: Sukeldunud rippmenüü (lahendus) [kahveldatud], Shoyombo Gabriel Ayomide.
Kui kasutate raamistikku, proovige portaale
Sellistes raamistikes nagu React või Vue on portaal funktsioon, mis võimaldab teil DOM-is renderdada komponendi väljaspool selle tavalist vanemhierarhiat. Portaalid on teie komponentide jaoks nagu teleportatsiooniseade. Need võimaldavad teil renderdada komponendi HTML-i kõikjal dokumendis (tavaliselt otse dokumendis document.body), hoides seda rekvisiitide, oleku ja sündmuste jaoks loogiliselt ühendatud algse vanemaga. See sobib suurepäraselt virnastamise kontekstilõksudest pääsemiseks, kuna renderdatud väljund ilmub sõna otseses mõttes väljaspool probleemset emakonteinerit.
ReactDOM.createPortal(
See tagab, et teie rippmenüü sisu ei ole peidetud vanema taha, isegi kui vanemal on ülevool: peidetud või madalam z-indeks. Varem vaadeldud stsenaariumis "Lõigatud tööriistavihje" kasutasin portaali, et päästa kohtspikker ületäitumise eest: peidetud klipp, asetades selle dokumendi kehasse ja paigutades selle konteineris päästiku kohale. Vaadake pliiatsi stsenaariumi 3: Lõigatud tööriistavihje (lahendus) [kahveldatud], Shoyombo Gabriel Ayomide. Tutvustame virnastamise konteksti ilma kõrvalmõjudeta Kõik eelmises jaotises kirjeldatud lähenemisviisid on suunatud elementide "lahtipakkimisele" probleemsetest virnastamiskontekstidest, kuid on olukordi, kus teil on tegelikult vaja või soovite luua virnastamiskonteksti. Uue virnastamiskonteksti loomine on lihtne, kuid kõigil lähenemisviisidel on kõrvalmõju. See tähendab, välja arvatud isolatsiooni kasutamine: isolaat. Elemendile rakendades määratakse selle elemendi laste virnastamiskontekst iga lapse suhtes ja selles kontekstis, selle asemel et seda mõjutada väljaspool seda. Klassikaline näide on sellele elemendile negatiivse väärtuse määramine, näiteks z-indeks: -1. Kujutage ette, et teil on .card komponent. Soovite lisada dekoratiivse kujundi, mis asub kaardi teksti taga, kuid kaardi tausta peal. Ilma kaardil virnastamiskontekstita saadab z-indeks: -1 kujundi juurvirnastamise konteksti (terve lehe) alla. See kaob selle kaardi valge tausta taha: Vaadake Shoyombo Gabriel Ayomide'i Pen Negative z-indeksit (probleem) [kahveldatud]. Selle lahendamiseks deklareerime isolation: isolate vanemkaardil .card: Vaadake Shoyombo Gabriel Ayomide'i Pen Negative z-indeksit (lahust) [kahveldatud]. Nüüd muutub .card element ise virnastamiskontekstiks. Kui selle alamelemendil — pseudoelemendil :before loodud dekoratiivkujul — on z-indeks: -1, läheb see vanema virnastamiskonteksti kõige lõppu. See istub ideaalselt teksti taga ja kaardi tausta peal, nagu ette nähtud. Järeldus Pidage meeles: järgmine kord, kui teie z-indeks tundub olevat kontrolli alt väljunud, on see virnastamiskontekst lõksus. Viited
Virnastamise kontekst (MDN) Z-indeks ja virnastamise kontekstid (web.dev) Natalie Pina "Kuidas luua uut virnastamise konteksti isoleerimisatribuudiga CSS-is" "Mis kuradit, z-indeks?", Josh Comeau
Täiendav lugemine saidil SmashingMag
"CSS Z-indeksi haldamine suurtes projektides", Steven Frieson "Kleepuvad päised ja täiskõrgused elemendid: keeruline kombinatsioon", Philip Braunen "Z-indeksi haldamine komponendipõhises veebirakenduses", Pavel Pomerantsev "Z-indeksi CSS-i omadus: terviklik välimus", Louis Lazaris
