Shin kun taɓa saita z-index: 99999 akan wani abu a cikin CSS ɗin ku, kuma baya fitowa saman sauran abubuwan? Ƙimar da ta fi girma ya kamata a sauƙaƙe sanya wannan abin a gani a saman wani abu, a ɗauka cewa dukkanin abubuwa daban-daban an saita su a ko dai ƙananan ƙima ko ba a saita su gaba ɗaya ba. Shafukan yanar gizon yawanci ana wakilta a cikin sarari mai girma biyu; duk da haka, ta hanyar amfani da takamaiman kaddarorin CSS, an ƙaddamar da wani jirgin sama na z-axis na tunanin don isar da zurfi. Wannan jirgin sama yana kan allo, kuma daga gare shi, mai amfani yana fahimtar tsari na abubuwa, ɗaya a saman ɗayan. Manufar da ke tattare da tunanin z-axis, fahimtar mai amfani game da abubuwa masu tarin yawa, shine cewa kaddarorin CSS waɗanda suka ƙirƙira shi sun haɗu don samar da abin da muke kira mahallin tari. Za mu yi magana game da yadda abubuwa suke "tara" akan shafin yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon yanar gizon, da abin da ke sarrafa tsarin tattarawa, da kuma hanyoyin da za a iya amfani da su don "cire" abubuwan idan an buƙata. Game da Stacking Context Ka yi tunanin shafin yanar gizon ku a matsayin tebur. Yayin da kuke ƙara abubuwan HTML, kuna shimfiɗa takarda ɗaya bayan ɗaya, akan tebur. Takarda ta ƙarshe da aka sanya tana daidai da abin da aka ƙara kwanan nan HTML, kuma tana zaune a kan duk sauran takaddun da aka ajiye a gabanta. Wannan shine kwararar daftarin aiki na yau da kullun, har ma da abubuwan gida. Teburin da kansa yana wakiltar mahallin tara tushen tushen, wanda aka kafa ta hanyar element, wanda ya ƙunshi duk sauran manyan fayiloli. Yanzu, takamaiman kaddarorin CSS sun shigo cikin wasa. Kayayyaki kamar matsayi (tare da z-index), sarari, canzawa, da ƙunshi) suna aiki kamar babban fayil. Wannan babban fayil ɗin yana ɗaukar nau'in nau'i da duk 'ya'yansa, yana fitar da su daga babban jigon, kuma ya haɗa su zuwa wani yanki na daban, yana haifar da abin da muke kira mahallin stacking. Don abubuwa masu matsayi, wannan yana faruwa lokacin da muka ayyana ƙimar z-index banda auto. Don kaddarorin kamar sarari, canzawa, da tacewa, ana ƙirƙiri mahallin tari ta atomatik lokacin da ake amfani da takamaiman ƙima.
Yi ƙoƙarin fahimtar wannan: Da zarar takarda (watau ɓangaren yara) ya kasance a cikin babban fayil (watau mahallin tari na iyaye), ba zai taɓa fita daga wannan babban fayil ɗin ba ko a sanya shi tsakanin takardu a cikin wani babban fayil daban. Z-index ɗin sa yanzu yana dacewa kawai a cikin babban fayil ɗin sa.
A cikin kwatancin da ke ƙasa, Takarda B yanzu tana cikin mahallin maƙalli na Jaka B, kuma ana iya yin oda da wasu takardu kawai a cikin babban fayil ɗin.
Yi tunanin, idan kuna so, kuna da manyan fayiloli guda biyu akan teburin ku:
babban fayil-a {z-index: 1; } .folder-b {z-index: 2; }
Bari mu sabunta alamar kadan. Cikin Jaka A shafi ne na musamman, z-index: 9999. Ciki Jakar B shafi ne bayyananne, z-index: 5.
.shafi na musamman {z-index: 9999; } .bayani-shafi {z-index: 5; }
Wane shafi ne a saman? Shafin .bayani ne a cikin Jaka B. Mai binciken ya yi watsi da takaddun yara kuma ya fara tara manyan fayiloli guda biyu. Yana ganin Jaka B (z-index: 2) kuma ya sanya shi a saman Jaka A (z-index: 1) saboda mun san cewa biyu sun fi ɗaya girma. A halin yanzu, .shafi na musamman da aka saita zuwa z-index: 9999 shafi yana a ƙasan tari duk da cewa an saita z-index ɗinsa zuwa mafi girman ƙima. Hakanan za'a iya shigar da mahallin tari (manyan fayiloli a cikin manyan fayiloli), ƙirƙirar "itacen iyali." Ka'ida ɗaya ta shafi: yaro ba zai taɓa tserewa babban fayil ɗin iyayensa ba. Yanzu da kuka sami yadda abubuwan da aka tattara su ke zama kamar manyan fayilolin da ke rukuni kuma suna sake tsara yadudduka, yana da kyau a yi tambaya: me yasa wasu kaddarorin - kamar canzawa da rashin fahimta - ƙirƙirar sabbin mahallin tarawa? Ga abin da: waɗannan kaddarorin ba sa haifar da abubuwan da aka tara su saboda yadda suke kama; Suna yin haka ne saboda yadda mai binciken ke aiki a ƙarƙashin hular. Lokacin da kuka yi amfani da canji, bayyananniyar sarari, tacewa, ko hangen nesa, kuna gaya wa mai binciken, "Hey, wannan kashi na iya motsawa, juyawa, ko shuɗe, don haka a shirya!"
Lokacin da kake amfani da waɗannan kaddarorin, mai binciken yana ƙirƙirar sabon mahallin tari don sarrafa sarrafawa da inganci. Wannan yana ba mai binciken damar sarrafa rayarwa, canzawa, da tasirin gani da kansa, yana rage buƙatar sake ƙididdige yadda waɗannan abubuwan ke hulɗa tare da sauran shafin. Yi la'akari da shi a matsayin mai bincike yana cewa, "Zan rike wannan babban fayil daban don kada in sake canza dukkan tebur a duk lokacin da wani abu a cikinsa ya canza." Amma akwaiwani sakamako na gefe. Da zarar mai binciken ya ɗaga wani abu a cikin nasa Layer, dole ne ya “lalata” duk abin da ke cikinsa, ya ƙirƙiro sabon mahallin tari. Yana kama da ɗaukar babban fayil daga tebur don sarrafa shi daban; duk abin da ke cikin wannan babban fayil ɗin yana haɗuwa, kuma mai binciken yanzu yana ɗaukar shi azaman raka'a ɗaya yayin yanke shawarar abin da ke saman menene. Don haka ko da yake sauye-sauye da kaddarorin ba za su iya bayyana sun shafi hanyar da abubuwa ke tarawa a gani ba, suna yi, kuma don haɓaka aiki ne. Wasu kaddarorin CSS da yawa kuma na iya ƙirƙirar mahallin tari don dalilai iri ɗaya. MDN yana ba da cikakken jeri idan kuna son zurfafa zurfafa. Akwai 'yan kaɗan, waɗanda kawai ke nuna yadda sauƙin ƙirƙirar mahallin tari ba tare da saninsa ba. Matsalar "Unstacking". Matsaloli masu rikitarwa na iya tasowa saboda dalilai da yawa, amma wasu sun fi kowa fiye da wasu. Abubuwan da aka gyara na ƙirar ƙirar ƙira ne na yau da kullun saboda suna buƙatar jujjuya bangaren don “buɗe” akan babban Layer sama da duk sauran abubuwa, sannan cire shi daga saman Layer lokacin da aka “rufe.” Ina da kwarin gwiwa cewa dukkanmu mun shiga cikin yanayin da muke buɗe modal kuma, saboda kowane dalili, bai bayyana ba. Ba wai bai buɗe yadda ya kamata ba, amma ba a gani ba a cikin ƙaramin yanki na mahallin tarawa. Wannan yana barin ku kuyi mamakin "yaya?" tunda ka saita:
.mai rufi { matsayi: gyarawa; /* yana haifar da mahallin tari */ z-index: 1; /* yana sanya kashi akan Layer sama da komai */ ciki: 0; nisa: 100%; tsawo: 100vh; ambaliya: boye; kala-kala: # 00000080; }
Wannan ya yi daidai, amma idan ɓangaren iyaye wanda ke ɗauke da motsin motsa jiki shine kashi na yara a cikin wani nau'in iyaye wanda kuma aka saita zuwa z-index: 1, wanda a zahiri yana sanya tsarin a cikin babban fayil ɗin da babban fayil ya rufe. Bari mu kalli wannan takamaiman yanayin da wasu ma'aurata na yau da kullun-matsala-tsalle-tsalle. Ina tsammanin ba wai kawai za ku ga yadda sauƙi yake ba don ƙirƙirar abubuwan da ba da gangan ba, har ma da yadda ake sarrafa su ba daidai ba. Har ila yau, yadda za ku koma jihar da aka gudanar ya dogara da halin da ake ciki. Yanayi na 1: Tsarin Tarko
Nan da nan za ku iya ganin tsarin ku a tarko a cikin ƙaramin matakin ƙasa kuma ku gano iyaye. Extensions na Browser Masu haɓakawa masu wayo sun gina kari don taimakawa. Kayan aiki kamar wannan “CSS Stacking Context Inspector” Chrome tsawo yana ƙara ƙarin shafin z-index zuwa DevTools ɗin ku don nuna muku bayani game da abubuwan da ke ƙirƙirar mahallin tari.
IDE Extensions Kuna iya har ma tabo batutuwa yayin haɓakawa tare da tsawo kamar wannan don lambar VS, wanda ke nuna yuwuwar abubuwan mahallin tari kai tsaye a cikin editan ku.
Zazzagewa Da Sake Sarrafawa
Bayan mun gano tushen dalilin, mataki na gaba shine magance shi. Akwai hanyoyi da yawa da za ku iya bi don magance wannan matsala, kuma zan jera su cikin tsari. Kuna iya zaɓar kowa a kowane matakin, kodayake; babu wanda zai iya yin korafi ko hana wani.
Canza Tsarin HTML
Ana ɗaukar wannan gyara mafi kyau. Domin ku shiga cikin batun mahallin da aka tara, dole ne ku sanya wasu abubuwa a wurare masu ban dariya a cikin HTML ɗinku. Sake fasalin shafi zai taimaka muku sake fasalin DOM da kawar da matsalar mahallin tarawa. Nemo matsala mai matsala kuma cire shi daga ɓangaren tarko a cikin alamar HTML. Misali, za mu iya warware yanayin farko, “The Trapped Modal,” ta hanyar motsa .modal-container daga cikin taken da sanya shi a cikin
Wannan abun ciki yana da z-index of 2 kuma har yanzu ba zai rufe tsarin ba.Kalli
Babban Abun ciki
Lokacin da ka danna maɓallin "Buɗe Modal", an sanya tsarin a gaban komai kamar yadda ya kamata. Dubi Halin Alƙalami na 1: Tsarin Tarko (Maganin) [mai yatsa] na Shoyombo Gabriel Ayomide. Daidaita TheMaganar Tara Iyaye A CSS Menene idan kashi ɗaya ne ba za ku iya motsawa ba tare da karya shimfidar wuri ba? Yana da kyau a magance batun: iyaye sun kafa mahallin. Nemo kadarorin CSS (ko kaddarorin) alhakin jawo mahallin kuma cire shi. Idan yana da manufa kuma ba za a iya cire shi ba, ba iyaye mafi girman ƙimar z-index fiye da abubuwan 'yan uwanta don ɗaga duka akwati. Tare da ƙimar z-index mafi girma, kwandon iyaye yana motsawa zuwa sama, kuma 'ya'yansa suna bayyana kusa da mai amfani. Dangane da abin da muka koya a cikin yanayin "The Submerged Dropdown", ba za mu iya matsar da zazzagewar daga mashigin navbar ba; ba zai yi ma'ana ba. Koyaya, zamu iya ƙara ƙimar z-index na kwandon .navbar don zama mafi girma fiye da ƙimar z-index element. .navbar { bango: # 333; /* z-index: 1; */ z-index: 3; matsayi: dangi; }
Tare da wannan canji, menu na saukewa yanzu yana bayyana a gaban abun ciki ba tare da wata matsala ba.
Dubi Halin Alƙalami na 2: Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙarƙashin Ƙwararrun Shoyombo Gabriel Ayomide.
Gwada Portals, Idan Amfani da Tsarin
A cikin tsarin kamar React ko Vue, Portal siffa ce da ke ba ku damar sanya wani sashi a waje da matsayi na iyaye na yau da kullun a cikin DOM. Portals kamar na'urar wayar tarho don abubuwan haɗin ku. Suna ba ku damar sanya HTML na wani yanki a ko'ina cikin takaddar (yawanci dama cikin takarda.body) yayin da yake kiyaye shi a haƙiƙance tare da iyayensa na asali don haɓakawa, jihohi, da abubuwan da suka faru. Wannan cikakke ne don guje wa tarko na mahallin tun da fitowar da aka yi a zahiri ya bayyana a waje da akwati na iyaye mai matsala.
ReactDOM.createPortal(
Wannan yana tabbatar da abun cikin zazzagewar ku baya ɓoye a bayan iyayensa, koda kuwa iyaye sun cika ambaliya: ɓoye ko ƙananan z-index. A cikin yanayin "The Clipped Tooltip" da muka duba a baya, Na yi amfani da Portal don ceton kayan aikin daga ambaliya: faifan ɓoye ta hanyar sanya shi a cikin jikin daftarin aiki da sanya shi sama da fararwa a cikin akwati. Dubi Halin Alkalami na 3: Kayan Aikin Clipped (Maganin) [forked] na Shoyombo Gabriel Ayomide. Gabatar da Halin Tari Ba tare da Tasirin Side ba Duk hanyoyin da aka bayyana a cikin sashin da ya gabata suna da nufin "cire" abubuwa daga mahallin tarawa mai matsala, amma akwai wasu yanayi inda a zahiri za ku buƙaci ko kuna son ƙirƙirar mahallin tari. Ƙirƙirar sabon mahallin tari abu ne mai sauƙi, amma duk hanyoyin suna zuwa tare da sakamako na gefe. Wato, ban da amfani da keɓewa: ware. Lokacin da aka yi amfani da shi a kan wani kashi, an ƙayyade mahallin abubuwan da ke tattare da wannan sigar dangane da kowane yaro da kuma cikin wannan mahallin, maimakon abubuwan da ke wajensa su rinjayi su. Misali na yau da kullun shine sanya wannan kashi mara kyau, kamar z-index: -1. Ka yi tunanin kana da bangaren katin . Kuna son ƙara siffar kayan ado wanda ke zaune a bayan rubutun katin, amma a saman bayanan katin. Ba tare da mahallin tarawa akan katin ba, z-index: -1 yana aika sifar zuwa ƙasan mahallin tari (duk shafin). Wannan yana sa ya ɓace a bayan bayanan farin katin: Dubi Pen Negative z-index (matsala) [forked] na Shoyombo Gabriel Ayomide. Don magance wannan, muna ayyana keɓewa: ware akan katin . mahaifa: Dubi Pen Negative z-index (mafifi) [forked] na Shoyombo Gabriel Ayomide. Yanzu, .katin da kansa ya zama mahallin tari. Lokacin da kashi na yaro - sifar kayan ado da aka yi akan :kafin ɓarna - yana da z-index: -1, yana zuwa ƙasan mahallin mahallin iyaye. Yana zaune daidai a bayan rubutun kuma a saman bayanan katin, kamar yadda aka yi niyya. Kammalawa Ka tuna: lokacin da z-index ɗin ku na gaba ya zama kamar ba shi da iko, mahallin tari ne. Nassoshi
Mahimman bayanai (MDN) Z-index da abubuwan da aka tara (web.dev) "Yadda za a Ƙirƙirar Sabon Tsarin Tsari tare da Kadarorin Warewa a cikin CSS", Natalie Pina "Menene Heck, z-index?", Josh Comeau
Kara karantawa akan SmashingMag
"Gudanar da CSS Z-Index A Manyan Ayyuka", Steven Frieson "Masu Kai Masu Maƙewa Da Cikakkun Abubuwan Tsawo: Haɗuwa Mai Dabaru", Philip Braunen "Gudanar da Fihirisar Z-A cikin Aikace-aikacen Gidan Yanar Gizon Da Aka Gina Makarantu", Pavel Pomerantsev "Tsarin Z-Index CSS: Cikakken Kallon", Louis Lazaris
