Inaondoa Muktadha wa Kuweka Rafu wa CSS

By Web Design · Mar 11, 2026 · 11 min read · 923 views

Read in: aa ace af ak alz am ar as awa ay az ba ban be bew

+191 more

bg bho bik bm bn brx bs bug ca ceb cgg ckb co crh cs cv cy da de din doi dv dyu dz ee el en eo es et eu fa ff fi fj fo fr fur fy ga gd gl gom gn gu ha haw he hi hil hne hmn hr hrx ht hu hy id ig ilo is it ja jam jv ka kab kbp kg kha kk kl km kn ko kri ku ktu ky la lb lg li lij ln lo lmo lt ltg lua luo lus lv mai mak mg mi min mk ml mn mni-mtei mos mr ms mt my nd ne nl nn no nr nso nus ny oc om or pa pag pam pap pl ps pt pt-br qu rn ro ru rw sa sah sat sc scn sg si sk sl sm sn so sq sr ss st su sus sv sw szl ta tcy te tg th ti tiv tk tl tn to tpi tr trp ts tt tum ty udm ug uk ur uz ve vec vi war wo xh yi yo yua yue zap zh zh-hk zh-tw zu

Je, umewahi kuweka z-index: 99999 kwenye kipengele katika CSS yako, na haitoki juu ya vipengele vingine? Thamani kubwa inapaswa kuweka kipengele hicho kwa urahisi juu ya kitu kingine chochote, ikizingatiwa kwamba vipengele vyote tofauti vimewekwa katika thamani ya chini au haijawekwa kabisa. Ukurasa wa wavuti kawaida huwakilishwa katika nafasi ya pande mbili; hata hivyo, kwa kutumia sifa mahususi za CSS, ndege ya kufikirika ya z-axis inaletwa ili kuwasilisha kina. Ndege hii ni ya kawaida kwa skrini, na kutoka kwayo, mtumiaji huona mpangilio wa vipengee, moja juu ya nyingine. Wazo la mhimili wa z-wazi, mtazamo wa mtumiaji wa vipengele vilivyopangwa, ni kwamba sifa za CSS zinazoiunda huchanganyika na kuunda kile tunachokiita muktadha wa kuweka mrundikano. Tutazungumza kuhusu jinsi vipengee "vinavyopangwa" kwenye ukurasa wa tovuti, ni nini kinachodhibiti mpangilio, na mbinu za vitendo za "kuondoa" vipengele vinapohitajika. Kuhusu Kuweka Muktadha Fikiria ukurasa wako wa wavuti kama dawati. Unapoongeza vipengele vya HTML, unaweka vipande vya karatasi, moja baada ya nyingine, kwenye dawati. Kipande cha mwisho cha karatasi kilichowekwa ni sawa na kipengee cha HTML kilichoongezwa hivi karibuni, na kinakaa juu ya karatasi zingine zote zilizowekwa mbele yake. Huu ndio mtiririko wa hati wa kawaida, hata kwa vipengele vilivyowekwa. Dawati lenyewe linawakilisha muktadha wa kuweka mzizi, unaoundwa na kipengele cha , ambacho kina folda zingine zote. Sasa, sifa mahususi za CSS zinatumika. Sifa kama vile nafasi (iliyo na z-index), uwazi, kubadilisha, na vyenye) hufanya kama folda. Folda hii huchukua kipengee na watoto wake wote, kuvitoa kutoka kwa rafu kuu, na kuvipanga katika rundo ndogo tofauti, na kuunda kile tunachokiita muktadha wa kutundika. Kwa vipengele vilivyowekwa, hii hutokea tunapotangaza thamani ya z-index isipokuwa otomatiki. Kwa sifa kama vile uwazi, kubadilisha na kuchuja, muktadha wa kuweka rafu huundwa kiotomatiki thamani mahususi zinapotumika.

Jaribu kuelewa hili: Pindi kipande cha karatasi (yaani, kipengele cha mtoto) kikiwa ndani ya folda (yaani, muktadha wa mrundikano wa mzazi), hakiwezi kamwe kutoka kwenye folda hiyo au kuwekwa kati ya karatasi kwenye folda tofauti. z-index yake sasa inafaa tu ndani ya folda yake mwenyewe.

Katika mchoro ulio hapa chini, Karatasi B sasa iko ndani ya muktadha wa kupangwa kwa Folda B, na inaweza tu kuagizwa na karatasi zingine kwenye folda.

Fikiria, ikiwa ungependa, kuwa una folda mbili kwenye dawati lako:

Folda A

Folda B

.folda-a { z-index: 1; } .folda-b { z-index: 2; }

Hebu tusasishe markup kidogo. Ndani ya Folda A kuna ukurasa maalum, z-index: 9999. Ndani ya Folda B kuna ukurasa wazi, z-index: 5.

Ukurasa Maalum

Ukurasa Wazi

. ukurasa maalum { z-index: 9999; } .ukurasa wa wazi { z-index: 5; }

Ni ukurasa gani ulio juu? Ni ukurasa wa .plain katika Folda B. Kivinjari hupuuza karatasi za watoto na kuweka folda mbili kwanza. Inaona Folda B (z-index: 2) na kuiweka juu ya Folda A (z-index: 1) kwa sababu tunajua kwamba mbili ni kubwa kuliko moja. Wakati huo huo, ukurasa wa .special-set uliowekwa kuwa z-index: ukurasa wa 9999 uko chini ya rafu ingawa faharasa yake ya z imewekwa kwa thamani ya juu zaidi iwezekanayo. Miktadha ya kupanga pia inaweza kuwekwa (folda ndani ya folda), kuunda "mti wa familia." Kanuni hiyo hiyo inatumika: mtoto hawezi kamwe kuepuka folda ya wazazi wake. Sasa kwa kuwa unapata jinsi miktadha ya kuweka mrundikano inavyofanya kazi kama folda zinazopanga na kupanga upya tabaka, inafaa kuuliza: kwa nini sifa fulani - kama vile kubadilisha na uwazi - huunda miktadha mipya ya kutundika? Hapa ni jambo: mali hizi hazitengenezi mazingira ya stacking kwa sababu ya jinsi yanavyoonekana; wanafanya hivyo kwa sababu ya jinsi kivinjari kinavyofanya kazi chini ya kofia. Unapotuma mabadiliko, uwazi, kichujio, au mtazamo, unaambia kivinjari, "Halo, kipengele hiki kinaweza kusogea, kuzunguka, au kufifia, kwa hivyo uwe tayari!"

Unapotumia vipengele hivi, kivinjari huunda muktadha mpya wa kuweka rafu ili kudhibiti uwasilishaji kwa ufanisi zaidi. Hii huruhusu kivinjari kushughulikia uhuishaji, kubadilisha na madoido ya kuona kwa kujitegemea, na hivyo kupunguza hitaji la kukokotoa upya jinsi vipengele hivi huingiliana na ukurasa wote. Ifikirie kama kivinjari kikisema, "Nitashughulikia folda hii kando ili sihitaji kubadilisha dawati zima kila wakati kitu ndani yake kinapobadilika." Lakini kunaathari ya upande. Mara baada ya kivinjari kuinua kipengele kwenye safu yake mwenyewe, ni lazima "itafishe" kila kitu ndani yake, na kuunda muktadha mpya wa stacking. Ni kama kuondoa folda kwenye dawati ili kuishughulikia kando; kila kitu ndani ya folda hiyo huwekwa katika vikundi, na kivinjari sasa kinaichukulia kama kitengo kimoja wakati wa kuamua ni nini kiko juu ya nini. Kwa hivyo ingawa sifa za ugeuzaji na uwazi zinaweza zisionekane kuathiri jinsi vipengee vinavyojipanga kimwonekano, hufanya, na ni kwa ajili ya uboreshaji wa utendaji. Tabia zingine kadhaa za CSS pia zinaweza kuunda miktadha ya kuweka kwa sababu sawa. MDN hutoa orodha kamili ikiwa unataka kuchimba zaidi. Kuna machache, ambayo yanaonyesha tu jinsi ilivyo rahisi kuunda muktadha wa kuweka bila kujua bila kujua. Tatizo la "Unstacking". Masuala ya kuweka safu yanaweza kutokea kwa sababu nyingi, lakini zingine ni za kawaida zaidi kuliko zingine. Vipengee vya modali ni muundo wa kawaida kwa sababu vinahitaji kugeuza kijenzi "kufungua" kwenye safu ya juu juu ya vitu vingine vyote, kisha kukiondoa kutoka safu ya juu "kimefungwa." Nina hakika kwamba sisi sote tumeingia katika hali ambapo tunafungua modal na, kwa sababu yoyote, haionekani. Sio kwamba haikufungua vizuri, lakini haionekani katika safu ya chini ya muktadha wa stacking. Hii inakuacha ujiulize "vipi?" tangu umeweka:

.wekelea { msimamo: fasta; /* huunda muktadha wa kuweka mrundikano */ z-index: 1; /* huweka kipengee kwenye safu juu ya kila kitu kingine */ kuingiza: 0; upana: 100%; urefu: 100vh; kufurika: siri; rangi ya asili: #00000080; }

Hili linaonekana kuwa sawa, lakini ikiwa kipengele cha mzazi kilicho na kichochezi cha modali ni kipengele cha mtoto ndani ya kipengele kingine cha mzazi ambacho pia kimewekwa kuwa z-index: 1, ambacho kitaalam kinaweka modali katika safu ndogo iliyofichwa na folda kuu. Wacha tuangalie hali hiyo maalum na mitego mingine kadhaa ya kawaida ya muktadha. Nadhani utaona sio tu jinsi ilivyo rahisi kuunda miktadha ya kuweka bila kukusudia, lakini pia jinsi ya kuisimamia vibaya. Pia, jinsi ya kurudi kwenye hali iliyosimamiwa inategemea hali hiyo. Tukio la 1: Njia Iliyonaswa

Mara moja unaweza kuona modali yako ikiwa imenaswa katika safu ya kiwango cha chini na kutambua mzazi. Viendelezi vya Kivinjari Wasanidi mahiri wameunda viendelezi vya kusaidia. Zana kama vile "Kikaguzi cha Muktadha wa Kuweka Rafu kwa CSS" kiendelezi cha Chrome huongeza kichupo cha ziada cha z-index kwenye DevTools yako ili kukuonyesha maelezo kuhusu vipengele vinavyounda muktadha wa kupangwa.

Viendelezi vya IDE Unaweza hata kutambua masuala wakati wa utayarishaji kwa kutumia kiendelezi kama hiki cha Msimbo wa VS, ambacho huangazia masuala yanayoweza kutokea ya kuweka mrundikano moja kwa moja kwenye kihariri chako.

Kuondoa na Kurejesha Udhibiti Baada ya kutambua sababu kuu, hatua inayofuata ni kukabiliana nayo. Kuna mbinu kadhaa ambazo unaweza kuchukua ili kukabiliana na tatizo hili, na nitaziorodhesha kwa utaratibu. Unaweza kuchagua mtu yeyote katika ngazi yoyote, ingawa; hakuna anayeweza kulalamika au kumzuia mwingine. Badilisha Muundo wa HTML Hii inachukuliwa kuwa suluhisho bora. Ili ukabiliane na suala la muktadha wa kuweka mrundikano, lazima uwe umeweka baadhi ya vipengele katika nafasi za kuchekesha ndani ya HTML yako. Kurekebisha ukurasa kutakusaidia kuunda upya DOM na kuondoa tatizo la muktadha wa kutundika. Pata kipengee chenye matatizo na ukiondoe kwenye kipengee cha kunasa kwenye markup ya HTML. Kwa mfano, tunaweza kutatua hali ya kwanza, "Njia Iliyonaswa," kwa kuhamisha kontena ya .modal kutoka kwenye kichwa na kukiweka katika kipengele cha peke yake.

Kijajuu

Maudhui Kuu

Maudhui haya yana faharasa ya z ya 2 na bado hayatashughulikia modali.

Kichwa cha Muundo

Sasa, siko nyuma ya chochote. Nimepata nafasi nzuri zaidi kutokana na urekebishaji wa DOM.

Unapobofya kitufe cha "Fungua Modal", modali imewekwa mbele ya kila kitu kingine kama inavyopaswa kuwa. Tazama Kielelezo cha 1 cha Kalamu: Njia ya Kunaswa (Suluhisho) [iliyopigwa kwa uma] na Shoyombo Gabriel Ayomide. Rekebisha TheMuktadha wa Uwekaji Rafu wa Mzazi Katika CSS Je, ikiwa kipengele ni kimoja huwezi kusogeza bila kuvunja mpangilio? Ni bora kushughulikia suala hilo: mzazi huanzisha muktadha. Tafuta mali ya CSS (au mali) inayohusika na kuchochea muktadha na uiondoe. Iwapo ina madhumuni na haiwezi kuondolewa, mpe mzazi thamani ya juu ya faharasa ya z kuliko vipengele vyake ili kuinua kontena zima. Ikiwa na thamani ya juu ya z-index, kontena kuu husogea hadi juu, na watoto wake huonekana karibu na mtumiaji. Kulingana na tulichojifunza katika hali ya "Kunjuzi Iliyozama", hatuwezi kuhamisha menyu kunjuzi kutoka kwa upau wa urambazaji; haitakuwa na maana. Hata hivyo, tunaweza kuongeza thamani ya fahirisi ya z ya chombo cha .navbar kuwa kubwa kuliko thamani ya .content kipengele cha z-index. .navbar { usuli: #333; /* z-index: 1; */ z-index: 3; nafasi: jamaa; }

Kwa mabadiliko haya, menyu kunjuzi sasa inaonekana mbele ya maudhui bila tatizo lolote. Tazama Kielelezo cha 2 cha Kalamu: Kunjuzi Iliyozama (Suluhisho) [iliyopigwa kwa uma] na Shoyombo Gabriel Ayomide. Jaribu Milango, Ikiwa Unatumia Mfumo Katika mifumo kama React au Vue, Tovuti ni kipengele kinachokuruhusu kutoa kijenzi nje ya daraja lake la kawaida la mzazi katika DOM. Lango ni kama kifaa cha kutuma kwa vifaa vyako. Hukuruhusu utoe HTML ya kijenzi popote kwenye hati (kawaida moja kwa moja hadi kwenye document.body) huku kikiiunganisha kimantiki na mzazi wake asili kwa propu, hali na matukio. Hii ni sawa kwa kuepuka mitego ya muktadha wa kuweka mrundikano kwa kuwa matokeo yaliyotolewa yanaonekana nje ya chombo kikuu chenye matatizo. ReactDOM.createPortal( , mwili.waraka );

Hii inahakikisha kuwa maudhui yako ya menyu kunjuzi hayajafichwa nyuma ya mzazi wake, hata kama mzazi ana mengi: yamefichwa au faharasa ya z ya chini. Katika hali ya "Kidokezo cha Zana Iliyopunguzwa" tuliyoangalia hapo awali, nilitumia Tovuti ili kuokoa kidokezo kutoka kwa vifurushi: klipu iliyofichwa kwa kuiweka kwenye kiini cha hati na kuiweka juu ya kichochezi ndani ya chombo. Tazama Mfano wa 3 wa Kalamu: Kidokezo Kilichonaswa (Suluhisho) [iliyopigwa kwa uma] na Shoyombo Gabriel Ayomide. Tunakuletea Muktadha wa Kurundika Bila Madhara Mbinu zote zilizoelezwa katika sehemu iliyotangulia zinalenga "kuondoa" vipengele kutoka kwa miktadha yenye shida ya kuweka safu, lakini kuna hali zingine ambapo utahitaji au kutaka kuunda muktadha wa kuweka. Kuunda muktadha mpya wa kuweka ni rahisi, lakini mbinu zote huja na athari. Hiyo ni, isipokuwa kwa kutumia kujitenga: kujitenga. Inapotumika kwa kipengele, muktadha wa mrundikano wa watoto wa kipengele hicho hubainishwa kuhusiana na kila mtoto na ndani ya muktadha huo, badala ya kuathiriwa na vipengele nje yake. Mfano wa kawaida ni kukabidhi kipengele hicho thamani hasi, kama vile z-index: -1. Fikiria una kijenzi cha .kadi. Unataka kuongeza umbo la mapambo ambalo linakaa nyuma ya maandishi ya .card, lakini juu ya usuli wa kadi. Bila muktadha wa mrundikano kwenye kadi, z-index: -1 hutuma umbo hadi chini ya muktadha wa mrundikano wa mizizi (ukurasa wote). Hii inaifanya kutoweka nyuma ya mandharinyuma meupe ya .card: Tazama faharasa ya z ya Pen Negative (tatizo) [iliyopigwa kwa uma] na Shoyombo Gabriel Ayomide. Ili kutatua hili, tunatangaza kutengwa: jitenge kwenye kadi ya mzazi . Tazama faharasa ya z ya Pen Negative (suluhisho) [iliyopigwa kwa uma] na Shoyombo Gabriel Ayomide. Sasa, kipengele cha .kadi chenyewe kinakuwa muktadha wa kuweka mrundikano. Wakati kipengele cha mtoto wake - umbo la mapambo linaloundwa kwenye :before-pseudo-element - ina z-index: -1, huenda hadi chini kabisa ya muktadha wa mrundikano wa mzazi. Inakaa kikamilifu nyuma ya maandishi na juu ya usuli wa kadi, kama ilivyokusudiwa. Hitimisho Kumbuka: wakati ujao faharasa yako ya z inaonekana kutodhibitiwa, ni muktadha wa mrundikano ulionaswa. Marejeleo

Muktadha wa kuweka mrundikano (MDN) Faharasa ya Z na miktadha ya kuweka mrundikano (web.dev) "Jinsi ya Kuunda Muktadha Mpya wa Kurundika kwa Sifa ya Kutengwa katika CSS", Natalie Pina "What The Heck, z-index??", Josh Comeau

Usomaji Zaidi Kwenye SmashingMag

"Kusimamia CSS Z-Index Katika Miradi Mikubwa", Steven Frieson "Vichwa Vinata na Vipengee vya Urefu Kamili: Mchanganyiko Mgumu", Philip Braunen "Kusimamia Z-Index Katika Maombi ya Wavuti yenye Sehemu", Pavel Pomerantsev "The Z-Index CSS Property: A Comprehensive Look", Louis Lazaris

Inaondoa Muktadha wa Kuweka Rafu wa CSS

Kijajuu

Maudhui Kuu

Enjoyed This Article?

Create Your Free Bio Page