Hefur þú einhvern tíma stillt z-index: 99999 á frumefni í CSS þínum, og það kemur ekki út ofan á aðra þætti? Svo stórt gildi ætti auðveldlega að setja þann þátt sjónrænt ofan á allt annað, að því gefnu að allir mismunandi þættir séu stilltir á annað hvort lægra gildi eða alls ekki stilltir. Vefsíða er venjulega sýnd í tvívíðu rými; Hins vegar, með því að nota tiltekna CSS eiginleika, er ímyndað z-ás plan kynnt til að miðla dýpt. Þetta plan er hornrétt á skjáinn og út frá því skynjar notandinn röð frumefna, hver ofan á annan. Hugmyndin á bak við ímyndaða z-ásinn, skynjun notandans á staflaðum þáttum, er að CSS eiginleikarnir sem búa til hann sameinast og mynda það sem við köllum stöflun samhengi. Við ætlum að tala um hvernig þáttum er „staflað“ á vefsíðu, hvað stjórnar stöflunaröðinni og hagnýtar aðferðir til að „afstafla“ þáttum þegar þörf krefur. Um stöflun samhengi Ímyndaðu þér vefsíðuna þína sem skrifborð. Þegar þú bætir við HTML þáttum leggurðu pappírsstykki, hvert á eftir öðru, á skrifborðið. Síðasta blaðið sem sett er jafngildir nýjasta HTML frumefninu og það situr ofan á öllum öðrum blöðum sem settir eru á undan honum. Þetta er venjulegt skjalaflæði, jafnvel fyrir hreiðra þætti. Skrifborðið sjálft táknar rótarstöflunarsamhengið, myndað af þættinum, sem inniheldur allar aðrar möppur. Nú koma tilteknir CSS eiginleikar við sögu. Eiginleikar eins og staðsetning (með z-vísitölu), ógagnsæi, umbreytingu og innihalda) virka eins og mappa. Þessi mappa tekur þátt og öll börn þess, dregur þau út úr aðalstaflanum og flokkar þau í sérstakan undirstafla og skapar það sem við köllum stöflunsamhengi. Fyrir staðsetta þætti gerist þetta þegar við lýsum yfir annað z-vísitölugildi en sjálfvirkt. Fyrir eiginleika eins og ógagnsæi, umbreytingu og síu er stöflunarsamhengið búið til sjálfkrafa þegar ákveðin gildi eru notuð.
Reyndu að skilja þetta: Þegar blað (þ.e. undirefni) er inni í möppu (þ.e. stöflunarsamhengi foreldris) getur það aldrei farið úr þeirri möppu eða verið sett á milli blaða í annarri möppu. Z-vísitalan hennar á nú aðeins við í eigin möppu.
Í myndinni hér að neðan er pappír B nú innan stöflunarsamhengis möppu B og er aðeins hægt að panta það með öðrum blöðum í möppunni.
Ímyndaðu þér, ef þú vilt, að þú sért með tvær möppur á borðinu þínu:
.folder-a { z-index: 1; } .mappa-b { z-vísitala: 2; }
Við skulum uppfæra merkið aðeins. Inni í möppu A er sérstök síða, z-index: 9999. Inni í möppu B er venjuleg síða, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Hvaða síða er efst? Það er .plain-síðan í möppu B. Vafrinn hunsar barnablöðin og staflar möppunum tveimur fyrst. Það sér möppu B (z-vísir: 2) og setur hana ofan á möppu A (z-vísir: 1) vegna þess að við vitum að tveir eru stærri en einn. Á sama tíma er .special-page stillt á z-index: 9999 síðan neðst í staflanum, jafnvel þó að z-index hennar sé stillt á hæsta mögulega gildi. Einnig er hægt að hreiðra samhengi (möppur inni í möppum) og búa til „ættartré“. Sama regla gildir: barn getur aldrei sloppið úr möppu foreldra sinna. Nú þegar þú færð hvernig stöflun samhengi hegðar sér eins og möppur sem flokka og endurraða lögum, þá er það þess virði að spyrja: hvers vegna búa ákveðnar eiginleikar - eins og umbreyting og ógagnsæi - til nýtt stöflunarsamhengi? Hér er málið: þessar eignir búa ekki til stöflunarsamhengi vegna þess hvernig þær líta út; þeir gera það vegna þess hvernig vafrinn virkar undir hettunni. Þegar þú beitir umbreytingu, ógagnsæi, síu eða sjónarhorni, þá ertu að segja við vafranum: „Hey, þessi þáttur gæti færst, snúist eða dofnað, svo vertu tilbúinn!
Þegar þú notar þessa eiginleika skapar vafrinn nýtt stöflunarsamhengi til að stjórna flutningi á skilvirkari hátt. Þetta gerir vafranum kleift að meðhöndla hreyfimyndir, umbreytingar og sjónræn áhrif sjálfstætt, sem dregur úr þörfinni á að endurreikna hvernig þessir þættir hafa samskipti við restina af síðunni. Hugsaðu um það sem vafrann sem segir: "Ég mun sjá um þessa möppu sérstaklega svo ég þurfi ekki að stokka upp allt skrifborðið í hvert skipti sem eitthvað inni í því breytist." En það eraukaverkun. Þegar vafrinn lyftir frumefni upp í sitt eigið lag verður hann að „fletja“ allt innan hans og búa til nýtt stöflunarsamhengi. Það er eins og að taka möppu af skrifborðinu til að meðhöndla hana sérstaklega; allt inni í þeirri möppu verður flokkað og vafrinn lítur nú á það sem eina einingu þegar hann ákveður hvað situr ofan á hverju. Þannig að jafnvel þó að umbreytingar- og ógagnsæi eiginleikar virðast ekki hafa áhrif á hvernig þættir stafla sjónrænt, þá gera þeir það og það er til að hagræða afköstum. Nokkrir aðrir CSS eiginleikar geta líka búið til stöflunarsamhengi af svipuðum ástæðum. MDN veitir heildarlista ef þú vilt kafa dýpra. Það eru allmargir, sem sýnir aðeins hversu auðvelt það er að búa til stöflunarsamhengi óvart án þess að vita af því. Vandamálið „Afstakka“ Staflavandamál geta komið upp af mörgum ástæðum, en sumar eru algengari en aðrar. Modal íhlutir eru klassískt mynstur vegna þess að þeir þurfa að skipta um íhlutinn til að „opna“ á efsta laginu fyrir ofan alla aðra þætti og fjarlægja það síðan úr efsta lagið þegar það er „lokað“. Ég er nokkuð viss um að við höfum öll lent í aðstæðum þar sem við opnum aðferð og, af hvaða ástæðu sem er, birtist það ekki. Það er ekki það að það hafi ekki opnað almennilega, heldur að það sé ekki sýnilegt í neðra lagi af stöflunarsamhenginu. Þetta fær þig til að velta fyrir þér "hvernig stendur á því?" síðan þú stillir:
.overlay { staða: fastur; /* býr til stöflunarsamhengið */ z-vísitala: 1; /* setur frumefnið á lag fyrir ofan allt annað */ innfellt: 0; breidd: 100%; hæð: 100vh; flæða: falinn; bakgrunnslitur: #00000080; }
Þetta lítur út fyrir að vera rétt, en ef foreldraþátturinn sem inniheldur modal kveikjuna er barnþáttur innan annars foreldraþáttar sem er einnig stilltur á z-index: 1, sem tæknilega setur modalið í undirlag sem er hulið af aðalmöppunni. Við skulum skoða þessa tilteknu atburðarás og nokkra aðra algenga gildra í stöflun. Ég held að þú munt sjá ekki aðeins hversu auðvelt það er að búa til stöflunarsamhengi óvart, heldur einnig hvernig á að stjórna þeim rangt. Það fer líka eftir aðstæðum hvernig þú ferð aftur í stýrt ástand. Atburðarás 1: The Trapped Modal
Þú getur strax séð aðferðina þína föst í lágu lagi og auðkennt foreldrið. Vafraviðbætur Snjallir verktaki hafa smíðað viðbætur til að hjálpa. Verkfæri eins og þessi „CSS Stacking Context Inspector“ Chrome viðbót bæta við auka z-index flipa við DevTools til að sýna þér upplýsingar um þætti sem skapa stöflun samhengi.
IDE viðbætur Þú getur jafnvel komið auga á vandamál meðan á þróun stendur með viðbót eins og þessari fyrir VS kóða, sem varpar ljósi á hugsanleg vandamál í stöflun samhengi beint í ritlinum þínum.
Afstafla og ná aftur stjórn Eftir að við höfum greint rót orsökarinnar er næsta skref að takast á við hana. Það eru nokkrar aðferðir sem þú getur tekið til að takast á við þetta vandamál og ég mun skrá þær í röð. Þú getur þó valið hvern sem er á hvaða stigi sem er; enginn getur kvartað eða hindrað annan. Breyttu HTML uppbyggingunni Þetta er talið besta leiðréttingin. Til að þú lendir í stöflunarsamhengi þarftu að hafa sett suma þætti í fyndnar stöður í HTML-num þínum. Endurskipulagning síðunnar mun hjálpa þér að endurmóta DOM og útrýma stöflunarsamhengisvandanum. Finndu vandamálið og fjarlægðu það úr gildrueiningunni í HTML merkingunni. Til dæmis getum við leyst fyrstu atburðarásina, „The Trapped Modal,“ með því að færa .modal-gáminn út úr hausnum og setja hann í
frumefnið af sjálfu sér.Þetta efni hefur z-vísitöluna 2 og mun samt ekki ná yfir aðferðina.Höfuð
Aðalefni
Þegar þú smellir á „Open Modal“ hnappinn er aðferðin staðsett fyrir framan allt annað eins og það á að vera. Sjá pennasviðsmynd 1: The Trapped Modal (lausn) [forked] eftir Shoyombo Gabriel Ayomide. Stilla TheForeldrastöflun samhengi í CSS Hvað ef þátturinn er sá sem þú getur ekki hreyft án þess að brjóta uppsetninguna? Það er betra að taka á málinu: foreldrið setur samhengið. Finndu CSS eignina (eða eiginleikana) sem bera ábyrgð á að kveikja á samhenginu og fjarlægðu það. Ef það hefur tilgang og ekki er hægt að fjarlægja það, gefðu foreldrinu hærra z-vísitölugildi en systkini þess til að lyfta öllu ílátinu. Með hærra z-vísitölugildi færist yfirgeymirinn efst og börn hans birtast nær notandanum. Byggt á því sem við lærðum í "The Submerged Dropdown" atburðarás, getum við ekki fært fellilistann út af siglingastikunni; það væri ekki skynsamlegt. Hins vegar getum við aukið z-index gildi .navbar gámsins til að vera hærra en z-index gildi .content þáttarins. .navbar { bakgrunnur: #333; /* z-vísitala: 1; */ z-vísitala: 3; staða: ættingi; }
Með þessari breytingu birtist .dropdown-valmyndin fyrir framan efnið án vandræða.
Sjá pennasviðsmynd 2: The Submerged Dropdown (Solution) [forked] eftir Shoyombo Gabriel Ayomide.
Prófaðu gáttir, ef þú notar ramma
Í ramma eins og React eða Vue er Portal eiginleiki sem gerir þér kleift að gera hluti utan venjulegs foreldrastigveldis í DOM. Gáttir eru eins og fjarflutningstæki fyrir íhlutina þína. Þeir gera þér kleift að birta HTML íhluta hvar sem er í skjalinu (venjulega beint inn í document.body) á meðan það heldur því rökrétt tengdu upprunalegu foreldri sínu fyrir leikmuni, ástand og atburði. Þetta er fullkomið til að sleppa við stöflun samhengisgildrur þar sem prentað úttak birtist bókstaflega fyrir utan vandræðalegt yfirgeymi.
ReactDOM.createPortal(
Þetta tryggir að fellilistaefnið þitt sé ekki falið á bak við foreldri sitt, jafnvel þó að foreldrið hafi yfirflæði: falið eða lægri z-vísitala. Í "The Clipped Tooltip" atburðarásinni sem við skoðuðum áðan, notaði ég gátt til að bjarga verkfæraráðinu frá yfirfallinu: falið bút með því að setja það í skjalið og staðsetja það fyrir ofan kveikjuna í ílátinu. Sjá pennasviðsmynd 3: The Clipped Tooltip (Solution) [gaflað] eftir Shoyombo Gabriel Ayomide. Við kynnum staflasamhengi án aukaverkana Allar aðferðir sem útskýrðar voru í fyrri hluta miða að því að „afstafla“ þáttum úr erfiðum stöflunarsamhengi, en það eru nokkrar aðstæður þar sem þú þarft eða vilt búa til stöflunarsamhengi. Það er auðvelt að búa til nýtt stöflunarsamhengi, en allar aðferðir hafa aukaverkanir. Það er, nema að nota einangrun: einangra. Þegar það er notað á frumefni ræðst stöflunarsamhengi barna þess þáttar miðað við hvert barn og innan þess samhengis, frekar en að vera undir áhrifum frá þáttum utan þess. Klassískt dæmi er að úthluta þeim þætti neikvæðu gildi, svo sem z-vísitölu: -1. Ímyndaðu þér að þú sért með .card hluti. Þú vilt bæta við skrautlegu formi sem situr fyrir aftan texta .card, en ofan á bakgrunn kortsins. Án stöflunarsamhengis á kortinu sendir z-index: -1 lögunina neðst á rótarstöflunarsamhenginu (heildarsíðuna). Þetta gerir það að verkum að það hverfur á bak við hvítan bakgrunn .cardsins: Sjá Pen Negative z-index (vandamál) [gaflað] eftir Shoyombo Gabriel Ayomide. Til að leysa þetta lýsum við yfir einangrun: isolate á foreldri .card: Sjá Pen Negative z-index (lausn) [gaflað] eftir Shoyombo Gabriel Ayomide. Nú verður .card þátturinn sjálfur að stöflunarsamhengi. Þegar undireining þess - skrautformið sem er búið til á :before gervi-einingunni - hefur z-vísitölu: -1, fer það neðst í stöflunarsamhengi foreldris. Það situr fullkomlega fyrir aftan textann og ofan á bakgrunn kortsins, eins og ætlað er. Niðurstaða Mundu: næst þegar z-vísitalan þín virðist stjórnlaus, þá er það staflað samhengi. Heimildir
Staflasamhengi (MDN) Z-vísitölu og stöflun samhengi (web.dev) „Hvernig á að búa til nýtt stöflunarsamhengi með einangrunareigninni í CSS,“ Natalie Pina „Hvað í andskotanum, z-index?“, Josh Comeau
Frekari lestur á SmashingMag
„Stjórna CSS Z-Index í stórum verkefnum“, Steven Frieson „Sticky hausar og þættir í fullri hæð: erfið samsetning“, Philip Braunen „Stjórna Z-Index í íhlutabundnu vefforriti“, Pavel Pomerantsev „Z-Index CSS Property: A Comprehensive Look“, Louis Lazaris
