Ydych chi erioed wedi gosod mynegai z: 99999 ar elfen yn eich CSS, ac nid yw'n dod allan ar ben elfennau eraill? Dylai gwerth mawr osod yr elfen honno yn weledol ar ben unrhyw beth arall, gan dybio bod yr holl elfennau gwahanol wedi'u gosod naill ai ar werth is neu heb eu gosod o gwbl. Mae tudalen we fel arfer yn cael ei chynrychioli mewn gofod dau ddimensiwn; fodd bynnag, trwy gymhwyso priodweddau CSS penodol, cyflwynir awyren echel-z dychmygol i gyfleu dyfnder. Mae'r awyren hon yn berpendicwlar i'r sgrin, ac ohono, mae'r defnyddiwr yn canfod trefn yr elfennau, un ar ben y llall. Y syniad y tu ôl i'r echelin z dychmygol, canfyddiad y defnyddiwr o elfennau wedi'u pentyrru, yw bod yr eiddo CSS sy'n ei greu yn cyfuno i ffurfio'r hyn rydyn ni'n ei alw'n gyd-destun pentyrru. Rydyn ni'n mynd i siarad am sut mae elfennau'n cael eu “pentyrru” ar dudalen we, beth sy'n rheoli'r drefn pentyrru, a dulliau ymarferol o “ddad-stacio” elfennau pan fo angen. Am Bentyrru Cyd-destunau Dychmygwch eich tudalen we fel desg. Wrth i chi ychwanegu elfennau HTML, rydych chi'n gosod darnau o bapur, un ar ôl y llall, ar y ddesg. Mae'r darn olaf o bapur a osodwyd yn cyfateb i'r elfen HTML a ychwanegwyd yn fwyaf diweddar, ac mae'n eistedd ar ben yr holl bapurau eraill a osodwyd o'i flaen. Dyma lif arferol y ddogfen, hyd yn oed ar gyfer elfennau nythu. Mae'r ddesg ei hun yn cynrychioli'r cyd-destun stacio gwraidd, a ffurfiwyd gan yr elfen , sy'n cynnwys pob ffolder arall. Nawr, mae eiddo CSS penodol yn dod i rym. Mae priodweddau fel safle (gyda mynegai-z), didreiddedd, trawsnewid a chynnwys) yn gweithredu fel ffolder. Mae'r ffolder hon yn cymryd elfen a'i holl blant, yn eu tynnu o'r prif bentwr, ac yn eu grwpio'n is-bentwr ar wahân, gan greu'r hyn a alwn yn gyd-destun pentyrru. Ar gyfer elfennau wedi'u lleoli, mae hyn yn digwydd pan fyddwn yn datgan gwerth mynegai-z ar wahân i auto. Ar gyfer eiddo fel didreiddedd, trawsnewid a hidlo, mae'r cyd-destun pentyrru yn cael ei greu'n awtomatig pan fydd gwerthoedd penodol yn cael eu cymhwyso.
Ceisiwch ddeall hyn: Unwaith y bydd darn o bapur (h.y., elfen plentyn) y tu mewn i ffolder (h.y., cyd-destun pentyrru’r rhiant), ni all byth adael y ffolder honno na chael ei osod rhwng papurau mewn ffolder arall. Mae ei mynegai z bellach yn berthnasol yn ei ffolder ei hun yn unig.
Yn y llun isod, mae Papur B bellach o fewn cyd-destun pentyrru Ffolder B, a dim ond gyda phapurau eraill yn y ffolder y gellir ei archebu.
Dychmygwch, os dymunwch, fod gennych chi ddau ffolder ar eich desg:
.folder-a { z-mynegai: 1; } .folder-b { z-mynegai: 2; }
Gadewch i ni ddiweddaru'r marcio ychydig. Mae Ffolder Tu Mewn A yn dudalen arbennig, z-mynegai: 9999. Mae Ffolder Tu Mewn B yn dudalen blaen, z-mynegai:5.
.special-page { z-mynegai: 9999; } .plain-page { z-mynegai: 5; }
Pa dudalen sydd ar y brig? Dyma'r dudalen .plain yn Ffolder B. Mae'r porwr yn anwybyddu'r papurau plentyn ac yn pentyrru'r ddwy ffolder yn gyntaf. Mae'n gweld Ffolder B (z-mynegai: 2) ac yn ei osod ar ben Ffolder A (z-mynegai: 1) oherwydd rydyn ni'n gwybod bod dau yn fwy nag un. Yn y cyfamser, mae'r dudalen .special-page a osodwyd i z-index:9999 tudalen ar waelod y pentwr er bod ei mynegai z wedi'i osod i'r gwerth uchaf posibl. Gellir nythu cyd-destunau pentyrru hefyd (ffolderi y tu mewn i ffolderi), gan greu “coeden deulu”. Mae'r un egwyddor yn berthnasol: ni all plentyn byth ddianc rhag ffolder ei rieni. Nawr eich bod chi'n cael sut mae cyd-destunau pentyrru yn ymddwyn fel ffolderi sy'n grwpio ac yn aildrefnu haenau, mae'n werth gofyn: pam mae rhai eiddo - fel trawsnewid a didreiddedd - yn creu cyd-destunau pentyrru newydd? Dyma'r peth: nid yw'r eiddo hyn yn creu cyd-destunau pentyrru oherwydd sut maen nhw'n edrych; maen nhw'n ei wneud oherwydd sut mae'r porwr yn gweithio o dan y cwfl. Pan fyddwch chi'n cymhwyso trawsnewid, didreiddedd, hidlydd, neu bersbectif, rydych chi'n dweud wrth y porwr, "Hei, efallai y bydd yr elfen hon yn symud, cylchdroi neu bylu, felly byddwch yn barod!"
Pan fyddwch chi'n defnyddio'r priodweddau hyn, mae'r porwr yn creu cyd-destun pentyrru newydd i reoli rendro yn fwy effeithlon. Mae hyn yn caniatáu i'r porwr drin animeiddiadau, trawsnewidiadau, ac effeithiau gweledol yn annibynnol, gan leihau'r angen i ailgyfrifo sut mae'r elfennau hyn yn rhyngweithio â gweddill y dudalen. Meddyliwch amdano fel y porwr yn dweud, “Byddaf yn trin y ffolder hon ar wahân felly nid oes rhaid i mi ad-drefnu'r ddesg gyfan bob tro y bydd rhywbeth y tu mewn iddo yn newid.” Ond mae ynasgil-effaith. Unwaith y bydd y porwr yn codi elfen i'w haen ei hun, rhaid iddo “wastatáu” popeth o'i fewn, gan greu cyd-destun pentyrru newydd. Mae fel tynnu ffolder oddi ar y ddesg i'w drin ar wahân; mae popeth y tu mewn i'r ffolder honno'n cael ei grwpio, ac mae'r porwr bellach yn ei drin fel un uned wrth benderfynu beth sy'n eistedd ar ben beth. Felly er ei bod yn bosibl nad yw'r priodweddau trawsnewid a didreiddedd yn effeithio ar y ffordd y mae elfennau'n pentyrru'n weledol, maen nhw'n gwneud hynny, ac mae ar gyfer optimeiddio perfformiad. Gall sawl eiddo CSS arall hefyd greu cyd-destunau pentyrru am resymau tebyg. Mae MDN yn darparu rhestr gyflawn os ydych chi am gloddio'n ddyfnach. Ceir cryn dipyn, sydd ond yn dangos pa mor hawdd yw hi i greu cyd-destun pentyrru yn anfwriadol heb yn wybod iddo. Y Broblem “Dad-stacio”. Gall problemau pentyrru godi am lawer o resymau, ond mae rhai yn fwy cyffredin nag eraill. Mae cydrannau moddol yn batrwm clasurol oherwydd mae angen toglo'r gydran i “agor” ar haen uchaf uwchlaw pob elfen arall, yna ei thynnu o'r haen uchaf pan fydd “ar gau.” Rwy'n eithaf hyderus bod pob un ohonom wedi rhedeg i mewn i sefyllfa lle rydym yn agor moddol ac, am ba reswm bynnag, nid yw'n ymddangos. Nid nad yw wedi agor yn iawn, ond ei fod allan o'r golwg mewn haen is o'r cyd-destun pentyrru. Mae hyn yn eich gadael chi i feddwl “sut dod?” ers i chi osod:
. troshaen { sefyllfa: sefydlog; /* yn creu'r cyd-destun pentyrru */ z-mynegai: 1; /* yn rhoi'r elfen ar haen uwchben popeth arall */ mewnosod: 0; lled: 100%; uchder: 100vh; gorlif: cudd; cefndir-lliw: #00000080; }
Mae hyn yn edrych yn gywir, ond os yw'r elfen rhiant sy'n cynnwys y sbardun moddol yn elfen plentyn o fewn elfen rhiant arall sydd hefyd wedi'i gosod i fynegai z: 1, sy'n dechnegol yn gosod y moddol mewn is-haen sydd wedi'i chuddio gan y prif ffolder. Gadewch i ni edrych ar y senario benodol honno a chwpl o beryglon cyd-destun pentyrru cyffredin eraill. Rwy'n meddwl y byddwch yn gweld nid yn unig pa mor hawdd yw hi i greu cyd-destunau pentyrru yn anfwriadol, ond hefyd sut i'w camreoli. Hefyd, mae sut rydych chi'n dychwelyd i gyflwr rheoledig yn dibynnu ar y sefyllfa. Senario 1: Y Modal Wedi'i Gaeth
Gallwch weld eich modd wedi'i ddal mewn haen lefel isel ar unwaith ac adnabod y rhiant. Estyniadau Porwr Mae datblygwyr craff wedi adeiladu estyniadau i helpu. Mae offer fel yr estyniad Chrome “CSS Stacking Context Inspector” yn ychwanegu tab mynegai z ychwanegol at eich DevTools i ddangos gwybodaeth i chi am elfennau sy'n creu cyd-destun pentyrru.
Estyniadau IDE Gallwch hyd yn oed sylwi ar faterion yn ystod datblygiad gydag estyniad fel hwn ar gyfer VS Code, sy'n tynnu sylw at faterion cyd-destun pentyrru posibl yn uniongyrchol yn eich golygydd.
Dadstacio Ac Adennill Rheolaeth
Ar ôl i ni nodi'r achos sylfaenol, y cam nesaf yw delio ag ef. Mae yna nifer o ddulliau y gallwch eu cymryd i fynd i'r afael â'r broblem hon, a byddaf yn eu rhestru yn eu trefn. Gallwch ddewis unrhyw un ar unrhyw lefel, serch hynny; ni all neb gwyno na rhwystro un arall.
Newid y Strwythur HTML
Ystyrir mai hwn yw'r ateb gorau posibl. Er mwyn i chi redeg i mewn i fater pentyrru cyd-destun, mae'n rhaid eich bod wedi gosod rhai elfennau mewn safleoedd doniol o fewn eich HTML. Bydd ailstrwythuro'r dudalen yn eich helpu i ail-lunio'r DOM a dileu'r broblem pentyrru cyd-destun. Dewch o hyd i'r elfen broblematig a'i thynnu o'r elfen trapio yn y marc HTML. Er enghraifft, gallwn ddatrys y senario cyntaf, “The Trapped Modal,” trwy symud y cynhwysydd .modal allan o'r pennawd a'i osod yn yr elfen
Mae gan y cynnwys hwn fynegai z o 2 ac ni fydd yn cynnwys y moddol o hyd.Pennawd
Prif Gynnwys
Pan gliciwch ar y botwm “Modd Agored”, mae'r moddol wedi'i leoli o flaen popeth arall fel y mae i fod. Gweler Senario Pen 1: Y Modd Dal (Ateb) [fforchog] gan Shoyombo Gabriel Ayomide. Addasu Mae'rCyd-destun Stacio Rhiant Yn CSS Beth os yw'r elfen yn un na allwch ei symud heb dorri'r cynllun? Mae'n well mynd i'r afael â'r mater: y rhiant sy'n sefydlu'r cyd-destun. Dewch o hyd i'r eiddo CSS (neu eiddo) sy'n gyfrifol am sbarduno'r cyd-destun a'i ddileu. Os oes ganddo bwrpas ac na ellir ei ddileu, rhowch werth mynegai z uwch i'r rhiant na'i elfennau brawd neu chwaer i godi'r cynhwysydd cyfan. Gyda gwerth z-mynegai uwch, mae'r cynhwysydd rhiant yn symud i'r brig, ac mae ei blant yn ymddangos yn agosach at y defnyddiwr. Yn seiliedig ar yr hyn a ddysgom yn y senario “The Submerged Dropdown”, ni allwn symud y cwymplen allan o'r bar llywio; ni fyddai'n gwneud synnwyr. Fodd bynnag, gallwn gynyddu gwerth mynegai-z y cynhwysydd .navbar i fod yn fwy na gwerth mynegai z yr elfen .content. .navbar { cefndir: #333; /* z-mynegai: 1; */ z-mynegai: 3; sefyllfa: perthynas; }
Gyda'r newid hwn, mae'r ddewislen .dropdown bellach yn ymddangos o flaen y cynnwys heb unrhyw broblem.
Gweler Senario Pen 2: Y Gostyngiad Tanddwr (Ateb) [fforchog] gan Shoyombo Gabriel Ayomide.
Rhowch gynnig ar Pyrth, Os Defnyddio Fframwaith
Mewn fframweithiau fel React neu Vue, mae Porth yn nodwedd sy'n caniatáu ichi wneud cydran y tu allan i'w hierarchaeth rhieni arferol yn y DOM. Mae pyrth fel dyfais teleportation ar gyfer eich cydrannau. Maent yn gadael i chi rendro HTML cydran yn unrhyw le yn y ddogfen (fel arfer i'r dde i mewn i document.body) tra'n ei gadw'n rhesymegol gysylltiedig â'i riant gwreiddiol ar gyfer propiau, cyflwr, a digwyddiadau. Mae hyn yn berffaith ar gyfer dianc rhag pentyrru trapiau cyd-destun gan fod yr allbwn wedi'i rendro yn llythrennol yn ymddangos y tu allan i'r cynhwysydd rhiant problemus.
ReactDOM.createPortal(
Mae hyn yn sicrhau nad yw eich cynnwys cwymplen wedi'i guddio y tu ôl i'w riant, hyd yn oed os oes gan y rhiant orlif: cudd neu fynegai z is. Yn y senario “The Tooltip Clipped” y gwnaethom edrych arno'n gynharach, defnyddiais Borth i achub y domen offer o'r gorlif: clip cudd trwy ei osod yng nghorff y ddogfen a'i osod uwchben y sbardun yn y cynhwysydd. Gweler Senario Pen 3: The Tooltip Clipiedig (Ateb) [fforchog] gan Shoyombo Gabriel Ayomide. Cyflwyno Cyd-destun Stacio Heb Sgil-effeithiau Mae’r holl ddulliau a eglurwyd yn yr adran flaenorol wedi’u hanelu at “ddad-bacio” elfennau o gyd-destunau pentyrru problemus, ond mae rhai sefyllfaoedd lle bydd gwir angen neu eisiau creu cyd-destun pentyrru. Mae creu cyd-destun pentyrru newydd yn hawdd, ond mae sgîl-effaith yn dod i bob agwedd. Hynny yw, heblaw am ddefnyddio ynysu: ynysu. O’i gymhwyso i elfen, mae cyd-destun stacio plant yr elfen honno yn cael ei bennu mewn perthynas â phob plentyn ac o fewn y cyd-destun hwnnw, yn hytrach na chael ei ddylanwadu gan elfennau y tu allan iddo. Enghraifft glasurol yw rhoi gwerth negyddol i'r elfen honno, fel mynegai z: -1. Dychmygwch fod gennych gydran .card. Rydych chi eisiau ychwanegu siâp addurniadol sydd y tu ôl i destun y cerdyn, ond ar ben cefndir y cerdyn. Heb gyd-destun pentyrru ar y cerdyn, mae z-index: -1 yn anfon y siâp i waelod y cyd-destun stacio gwreiddiau (y dudalen gyfan). Mae hyn yn gwneud iddo ddiflannu y tu ôl i gefndir gwyn y .card: Gweler mynegai z-pen Negative (problem) [fforchog] gan Shoyombo Gabriel Ayomide. I ddatrys hyn, rydym yn datgan ynysu: ynysu ar y rhiant .card: Gweler y Mynegai z-Pen Negative (datrysiad) [fforchog] gan Shoyombo Gabriel Ayomide. Nawr, mae'r elfen .card ei hun yn dod yn gyd-destun pentyrru. Pan fydd gan ei elfen plentyn - y siâp addurniadol a grëwyd ar yr :cyn ffug-elfen - fynegai z: -1, mae'n mynd i waelod cyd-destun pentyrru'r rhiant. Mae'n eistedd yn berffaith y tu ôl i'r testun ac ar ben cefndir y cerdyn, yn ôl y bwriad. Casgliad Cofiwch: y tro nesaf y bydd eich mynegai-z yn ymddangos allan o reolaeth, mae'n gyd-destun pentyrru caeth. Cyfeiriadau
Cyd-destun pentyrru (MDN) Mynegai Z a chyd-destunau pentyrru (web.dev) “Sut i Greu Cyd-destun Pentyrru Newydd gyda'r Eiddo Arwahanu yn CSS”, Natalie Pina “What The Heck, z-index??”, Josh Comeau
Darllen Pellach Ar SmashingMag
“Rheoli CSS Z-Index In Large Projects”, Steven Frieson “Penawdau Gludiog Ac Elfennau Uchder Llawn: Cyfuniad Anodd”, Philip Braunen “Rheoli Z-Index Mewn Cymhwysiad Gwe Seiliedig ar Gydran”, Pavel Pomerantsev “Eiddo Z-Index CSS: Golwg Cynhwysfawr”, Louis Lazaris
