Ar shocraigh tú z-innéacs: 99999 ar eilimint i do CSS riamh, agus nach dtagann sé amach ar bharr eilimintí eile? Ba chóir go gcuirfeadh luach mór an eilimint sin go radhairc ar bharr aon rud eile, ag glacadh leis go bhfuil na heilimintí éagsúla go léir socraithe ag luach níos ísle nó nach bhfuil siad socraithe ar chor ar bith. De ghnáth léirítear leathanach gréasáin i spás déthoiseach; áfach, trí shainairíonna CSS a chur i bhfeidhm, tugtar isteach eitleán samhailteach z-ais chun doimhneacht a chur in iúl. Tá an t-eitleán seo ingearach leis an scáileán, agus uaidh, feiceann an t-úsáideoir ord na n-eilimintí, ceann ar bharr an chinn eile. Is é an smaoineamh atá taobh thiar den z-ais shamhailteach, dearcadh an úsáideora ar eilimintí cruachta, ná go gcomhcheanglaíonn na hairíonna CSS a chruthaíonn é chun comhthéacs cruachta a chruthú. Beimid ag caint faoin gcaoi a “cruachtar” eilimintí ar leathanach gréasáin, cad a rialaíonn an t-ordú cruachta, agus cuir chuige praiticiúla chun eilimintí a “dhíchruacháil” nuair is gá. Maidir le Comhthéacsanna Cruachta Samhlaigh do leathanach gréasáin mar dheasc. De réir mar a chuireann tú eilimintí HTML leis, tá tú ag leagan píosaí páipéir, ceann i ndiaidh a chéile, ar an deasc. Is ionann an píosa páipéir deiridh a cuireadh leis an eilimint HTML is déanaí a cuireadh leis, agus suíonn sé ar bharr na bpáipéar eile go léir a cuireadh roimhe. Is é seo an gnáthshreabhadh doiciméad, fiú amháin i gcás eilimintí neadaithe. Léiríonn an deasc féin an comhthéacs cruachta fréamhacha, a chruthaítear leis an eilimint , ina bhfuil gach fillteán eile. Anois, tagann airíonna sonracha CSS i bhfeidhm. Feidhmíonn airíonna cosúil le suíomh (le z-innéacs), teimhneacht, claochlú, agus coimeádann siad) mar fhillteán. Glacann an fillteán seo eilimint agus a chuid leanaí go léir, baintear amach as an bpríomhchruach iad, agus grúpálann siad i bhfo-chruach ar leith iad, ag cruthú comhthéacs cruachta ar a dtugaimid. Maidir le heilimintí suite, tarlaíonn sé seo nuair a dhearbhaímid luach z-innéacs seachas luach uathoibríoch. Maidir le hairíonna cosúil le teimhneacht, claochlú, agus scagaire, cruthaítear an comhthéacs cruachta go huathoibríoch nuair a chuirtear luachanna sonracha i bhfeidhm.
Déan iarracht é seo a thuiscint: Nuair atá píosa páipéir (i.e., eilimint linbh) taobh istigh d’fhillteán (i.e., comhthéacs cruachta an tuismitheora), ní féidir leis imeacht as an bhfillteán sin nó é a chur idir páipéir i bhfillteán eile. Níl a z-innéacs ábhartha anois ach amháin laistigh dá fhillteán féin.
Sa léaráid thíos, tá Páipéar B laistigh de chomhthéacs cruachta Fillteán B anois, agus ní féidir é a ordú ach le páipéir eile san fhillteán.
Samhlaigh, más maith leat, go bhfuil dhá fhillteán agat ar do dheasc:
.folder-a { z-innéacs: 1; } .folder-b { z-innéacs: 2; }
Déanaimis an marcáil a nuashonrú beagán. Is leathanach speisialta é Fillteán Laistigh A, z-innéacs: 9999. Is gnáth-leathanach é Fillteán Taobh istigh B, z-innéacs:5.
.special-page {z-innéacs: 9999; } .plain-page { z-innéacs: 5; }
Cén leathanach atá ar bharr? Is é an leathanach .plain i bhFillteán B é. Déanann an brabhsálaí neamhaird ar na páipéir linbh agus cruachann sé an dá fhillteán ar dtús. Feiceann sé Fillteán B (z-innéacs: 2) agus cuireann sé ar bharr Fillteán A (z-innéacs: 1) mar tá a fhios againn go bhfuil dhá cheann níos mó ná ceann amháin. Idir an dá linn, tá an leathanach .special-set go z-innéacs: 9999 leathanach ag bun an chruach cé go bhfuil a z-innéacs socraithe ag an luach is airde is féidir. Is féidir comhthéacsanna cruachta a neadú freisin (fillteáin taobh istigh de fhillteáin), ag cruthú “crann teaghlaigh”. Tá feidhm ag an bprionsabal céanna: ní féidir le leanbh éalú riamh as fillteán a thuismitheoirí. Anois go bhfaigheann tú an chaoi a n-iompraíonn comhthéacsanna cruachta cosúil le fillteáin a dhéanann sraitheanna a ghrúpáil agus a athordú, is fiú a fhiafraí: cén fáth a gcruthaíonn airíonna áirithe - cosúil le claochlú agus teimhneacht - comhthéacsanna cruachta nua? Seo an rud: ní chruthaíonn na hairíonna seo comhthéacsanna cruachta mar gheall ar an gcuma atá orthu; déanann siad é mar gheall ar an gcaoi a n-oibríonn an brabhsálaí faoin gcochall. Nuair a chuireann tú claochlú, teimhneacht, scagaire nó peirspictíocht i bhfeidhm, tá tú ag rá leis an mbrabhsálaí, “Hey, d’fhéadfadh an eilimint seo bogadh, rothlú nó céimnithe, mar sin bí réidh!”
Nuair a úsáideann tú na hairíonna seo, cruthaíonn an brabhsálaí comhthéacs cruachta nua chun rindreáil a bhainistiú ar bhealach níos éifeachtaí. Ligeann sé seo don bhrabhsálaí beochan, claochluithe agus éifeachtaí amhairc a láimhseáil go neamhspleách, rud a laghdóidh an gá atá le hathríomh ar an gcaoi a n-idirghníomhaíonn na heilimintí seo leis an gcuid eile den leathanach. Smaoinigh air mar a deir an brabhsálaí, “Déileálfaidh mé an fillteán seo ar leithligh ionas nach mbeidh orm an deasc iomlán a athshuíomh gach uair a athraíonn rud éigin taobh istigh de.” Ach táfo-éifeacht. Nuair a ardaíonn an brabhsálaí eilimint ina chiseal féin, caithfidh sé gach rud laistigh de a “leacú”, ag cruthú comhthéacs cruachta nua. Tá sé cosúil le fillteán a thógáil den deasc chun é a láimhseáil ar leithligh; déantar gach rud laistigh den fhillteán sin a ghrúpáil, agus déileálann an brabhsálaí anois mar aonad amháin agus é ag socrú cad a shuíonn ar bharr an méid. Mar sin cé go mb’fhéidir nach bhfuil an chuma ar an scéal go bhfuil tionchar ag na hairíonna claochlaithe agus teimhneachta ar an mbealach a chruann gnéithe ó thaobh amhairc de, déanann siad, agus is le haghaidh optamú feidhmíochta atá sé. Is féidir le roinnt maoine CSS eile comhthéacsanna cruachta a chruthú ar chúiseanna comhchosúla. Soláthraíonn MDN liosta iomlán más mian leat tochailt níos doimhne. Tá go leor leor ann, rud a léiríonn cé chomh héasca agus atá sé comhthéacs cruachta a chruthú gan chuimhneamh i ngan fhios dó. An Fhadhb “Díchstacáil”. Is féidir le saincheisteanna cruachta teacht chun cinn ar go leor cúiseanna, ach tá cuid acu níos coitianta ná a chéile. Is patrún clasaiceach iad comhpháirteanna módúla toisc go dteastaíonn uathu an comhpháirt a scoránú chun “oscailt” ar shraith uachtarach thar aon eilimintí eile, agus é a bhaint den tsraith uachtarach nuair a bhíonn sé “dúnta”. Táim lánchinnte go bhfuil gach duine againn tar éis dul i ngleic le cás ina n-osclaíonn muid modúl agus, ar chúis ar bith, nach bhfuil sé le feiceáil. Ní hé nár oscail sé i gceart, ach go bhfuil sé as radharc i sraith níos ísle den chomhthéacs cruachta. Fágann sé seo go bhfuil iontas ort "conas a tháinig?" ó shocraigh tú:
.forleagan { seasamh: seasta; Cruthaíonn /* an comhthéacs cruachta */ z-innéacs: 1; /* cuireann sé an eilimint ar shraith os cionn gach rud eile */ inset: 0; leithead: 100%; airde: 100vh; thar maoil: i bhfolach; dath an chúlra: #00000080; }
Breathnaíonn sé seo i gceart, ach más eilimint linbh í an eilimint tuismitheoir ina bhfuil an truicear modha laistigh de thuismitheoir eile atá socraithe go z-innéacs freisin: 1, a chuireann an modúl go teicniúil i bhfoshraith atá doiléir ag an bpríomhfhillteán. Breathnaímid ar an gcás sonrach sin agus ar chúpla contúirtí coitianta eile i gcomhthéacs cruachta. Sílim go bhfeicfidh tú ní hamháin cé chomh héasca is atá sé comhthéacsanna cruachta a chruthú gan chuimhneamh, ach freisin conas iad a mhíbhainistíocht. Chomh maith leis sin, braitheann an chaoi a bhfilleann tú ar stát bainistithe ar an gcás. Cás 1: An Modal Gafa
Is féidir leat do mhodúil a fheiceáil láithreach gafa i gciseal ísealleibhéil agus an tuismitheoir a aithint. Eisínteachtaí Brabhsálaí Tá síntí tógtha ag forbróirí cliste chun cabhrú leo. Cuireann uirlisí cosúil leis an síneadh Chrome “Cigire Comhthéacs Cruachta CSS” Chrome cluaisín z-innéacs breise le do DevTools chun faisnéis a thaispeáint duit faoi eilimintí a chruthaíonn comhthéacs cruachta.
Eisínteachtaí IDE Is féidir leat fiú saincheisteanna a fheiceáil le linn forbartha le síneadh cosúil leis an gceann seo le haghaidh Cód VS, a leagann béim ar cheisteanna comhthéacs cruachta féideartha go díreach i d'eagarthóir.
Díchruacháil Agus Rialú a Fháil ar Ais Tar éis dúinn an bhunchúis a aithint, is é an chéad chéim eile déileáil leis. Tá go leor cineálacha cur chuige is féidir leat a ghlacadh chun dul i ngleic leis an bhfadhb seo, agus déanfaidh mé iad a liostú in ord. Is féidir leat duine ar bith a roghnú ar aon leibhéal, áfach; ní féidir le haon duine gearán a dhéanamh nó bac a chur ar dhuine eile. Athraigh an Struchtúr HTML Meastar gurb é seo an socrú is fearr. Le go mbeidh tú in ann ceist comhthéacs cruachta a dhéanamh, ní mór duit roinnt gnéithe a bheith curtha i suíomhanna greannmhara laistigh de do HTML. Cabhróidh athstruchtúrú an leathanaigh leat an DOM a athmhúnlú agus deireadh a chur leis an bhfadhb cruachta comhthéacs. Faigh an eilimint fhadhbach agus bain den eilimint gaisteoireachta sa mharcáil HTML í. Mar shampla, is féidir linn an chéad chás, “The Trapped Modal,” a réiteach tríd an gcoimeádán .modal a bhogadh amach as an gceanntásc agus é a chur san eilimint
leis féin.Tá z-innéacs de 2 ag an ábhar seo agus ní chlúdóidh sé an modúl go fóill.Ceanntásc
Príomhábhar
Nuair a chliceálann tú ar an gcnaipe “Mód Oscailte”, tá an modúl suite os comhair gach rud eile mar a cheaptar a bheith. Féach Cás Peann 1: An Modal Gafa (Réiteach) [forked] le Shoyombo Gabriel Ayomide. Coigeartaigh anComhthéacs Cruachta Tuismitheoir i CSS Cad a tharlaíonn má tá an eilimint ar cheann nach féidir leat a bhogadh gan an leagan amach a bhriseadh? Is fearr aghaidh a thabhairt ar an tsaincheist: socraíonn an tuismitheoir an comhthéacs. Faigh an t-airí (nó na hairíonna) CSS atá freagrach as an comhthéacs a spreagadh agus bain amach é. Más rud é go bhfuil cuspóir aige agus nach féidir é a bhaint, tabhair luach innéacs z níos airde don tuismitheoir ná mar a bhaineann sé lena sibling chun an coimeádán iomlán a ardú. Le luach z-innéacs níos airde, bogann an coimeádán tuismitheora go dtí an barr, agus bíonn a leanaí le feiceáil níos gaire don úsáideoir. Bunaithe ar an méid a d’fhoghlaim muid sa chás “The Submerged dropdown”, ní féidir linn an anuas a bhogadh amach as an mbarra loingseoireachta; ní bheadh ciall leis. Mar sin féin, is féidir linn luach z-innéacs an choimeádáin .navbar a mhéadú le bheith níos mó ná luach innéacs z an eilimint .content. .navbar { cúlra: #333; /* z-innéacs: 1; */ z-innéacs: 3; seasamh: coibhneasta; }
Leis an athrú seo, tá an .dropdown-menu le feiceáil anois os comhair an ábhair gan aon cheist.
Féach Cás Peann 2: An Droim Anuas Báite (Réiteach) [forked] le Shoyombo Gabriel Ayomide.
Bain triail as Tairseacha, Má tá Creat á Úsáid agat
I gcreat cosúil le React nó Vue, is gné é Tairseach a ligeann duit comhpháirt a sholáthar lasmuigh dá ghnáth-ordlathas tuismitheora sa DOM. Tá tairseacha cosúil le gléas teleportation do do chomhpháirteanna. Ligeann siad duit HTML comhpháirte a sholáthar áit ar bith sa doiciméad (go hiondúil ar dheis isteach i document.body) agus é a choinneáil ceangailte go loighciúil lena thuismitheoir bunaidh le haghaidh frapaí, stáit agus imeachtaí. Tá sé seo foirfe chun éalú ó ghaistí comhthéacs cruachta ós rud é go bhfeictear an t-aschur rindreáilte go litriúil lasmuigh den mháthair-choimeádán fadhbach.
ReactDOM.createPortal(
Cinntíonn sé seo nach bhfuil d’inneachar anuas i bhfolach taobh thiar dá thuismitheoir, fiú má tá ró-shreabhadh ag an tuismitheoir: i bhfolach nó innéacs z níos ísle. Sa chás “The Clippped Tooltip” a d’fhéachamar air níos luaithe, d’úsáid mé Tairseach chun an leid uirlisí a shábháil ón ró-shreabhadh: gearrthóg folaithe trína chur i gcorp an doiciméid agus é a chur os cionn an truicear laistigh den choimeádán. Féach Cás Peann 3: An Leid Uirlis Ghearrtha (Réiteach) [forked] le Shoyombo Gabriel Ayomide. Ag tabhairt isteach Comhthéacs Cruachta Gan Fo-iarmhairtí Tá na cineálacha cur chuige go léir a míníodh sa chuid roimhe seo dírithe ar ghnéithe “díchstaiceáil” ó chomhthéacsanna cruachta fadhbacha, ach tá cásanna áirithe ann ina mbeidh gá agat nó ina dteastaíonn uait comhthéacs cruachta a chruthú. Tá sé éasca comhthéacs cruachta nua a chruthú, ach tagann fo-iarmhairt le gach cur chuige. Is é sin, ach amháin i gcás leithlisiú a úsáid: leithlisiú. Nuair a chuirtear i bhfeidhm é ar eilimint, déantar comhthéacs cruachta leanaí na gné sin a chinneadh i gcoibhneas le gach leanbh agus laistigh den chomhthéacs sin, seachas a bheith faoi thionchar eilimintí lasmuigh de. Sampla clasaiceach is ea luach diúltach a shannadh don eilimint sin, mar z-innéacs: -1. Samhlaigh go bhfuil comhpháirt .card agat. Ba mhaith leat cruth maisiúil a chur leis a shuíonn taobh thiar de théacs an chárta, ach ar bharr chúlra an chárta. Gan comhthéacs cruachta ar an gcárta, cuireann z-innéacs: -1 an cruth chuig bun an chomhthéacs cruachta fréamhacha (an leathanach iomlán). Fágann sé seo go n-imíonn sé taobh thiar de chúlra bán an chárta . Féach ar an Z-innéacs Peann Negative (fadhb) [forked] le Shoyombo Gabriel Ayomide. Chun é seo a réiteach, dearbhaímid leithlisiú: leithlisiú ar an gcárta .tuismitheoir: Féach ar an Z-innéacs Peann Negative (réiteach) [forked] le Shoyombo Gabriel Ayomide. Anois, éiríonn an eilimint .card féin ina comhthéacs cruachta. Nuair a bhíonn z-innéacs: -1 ag a eilimint linbh - an cruth maisiúil a cruthaíodh ar an :roimh pseudo-eilimint -, téann sé go bun an-bun de chomhthéacs cruachta an tuismitheora. Suíonn sé go foirfe taobh thiar den téacs agus ar bharr chúlra an chárta, mar a bhí beartaithe. Conclúid Cuimhnigh: an chéad uair eile is cosúil go bhfuil do z-innéacs imithe ó smacht, is comhthéacs cruachta gafa é. Tagairtí
Comhthéacs cruachta (MDN) Z-innéacs agus comhthéacsanna cruachta (web.dev) “Conas Comhthéacs Nua Cruachta a Chruthú leis an Maoin Leithlisithe i CSS”, Natalie Pina “What The Heck, z-innéacs??”, Josh Comeau
Tuilleadh Léitheoireachta Ar SmashingMag
“Bainistiú CSS Z-Innéacs i dTionscadail Mhóra”, Steven Frieson “Ceanntásca Greamacha agus Eilimintí Lánairde: Teaglaim Chasta”, Philip Braunen “Z-Innéacs a Bhainistiú i bhFeidhmchlár Gréasáin Bunaithe ar Chomhpháirt”, Pavel Pomerantsev “An Z-Index CSS Property: A Comprehensive Look”, Louis Lazaris
