Wake wamisa u-z-index: 99999 entweni ku-CSS yakho, futhi ayiphumi phezu kwezinye izici? Inani elikhulu kufanele libeke kalula leyo elementi ngokubukeka phezu kwanoma yini enye, kucatshangwa ukuthi zonke izici ezihlukene zisethwe kunani eliphansi noma azisethwanga nhlobo. Ikhasi lewebhu livamise ukumelwa endaweni enezinhlangothi ezimbili; nokho, ngokusebenzisa izici ezithile ze-CSS, indiza ye-z-axis ecatshangelwayo yethulwa ukuze idlulise ukujula. Le ndiza incike esikrinini, futhi ukusuka kuyo, umsebenzisi ubona ukuhleleka kwezinto, enye phezu kwenye. Umqondo ongemuva kwe-z-eksisi ecatshangelwayo, umbono womsebenzisi wezinto ezistakiwe, ukuthi izici ze-CSS eziyidalayo ziyahlangana ukuze zenze lokho esikubiza ngokuthi umongo wokupakisha. Sizokhuluma ngokuthi ama-elementi "anqwabelene" kanjani ekhasini lewebhu, yini elawula ukuhleleka kwesitaki, nezindlela ezingokoqobo zokuthi "khipha isitaki" lapho kudingeka. Mayelana Nokuqukethwe Kwesitaki Cabanga ngekhasi lakho lewebhu njengedeski. Njengoba wengeza izakhi ze-HTML, ubeka izingcezu zephepha, ngokulandelana, phezu kwedeski. Iphepha lokugcina elibekwe lilingana nesici se-HTML esisanda kufakwa, futhi lihlala phezu kwawo wonke amanye amaphepha abekwe ngaphambi kwalo. Lokhu ukugeleza kwedokhumenti okuvamile, ngisho nasezintweni ezivalelwe. Ideski ngokwalo limele umongo wokunqwabelana kwezimpande, owenziwe isici se-, esiqukethe wonke amanye amafolda. Manje, izici ezithile ze-CSS ziyangena. Izici ezifana nendawo (enenkomba engu-z), ukungafihli, ukuguqula, nokuqukatha) zisebenza njengefolda. Le folda ithatha i-elementi nazo zonke izingane zayo, izikhiphe kusitaki esikhulu, futhi izihlanganise zibe isitaki esincane esihlukile, idale lokho esikubiza ngokuthi umongo wokunqwabelanisa. Kuzinto ezimisiwe, lokhu kwenzeka lapho simemezela inani lenkomba engu-z ngaphandle kwe-auto. Ezicini ezifana ne-opacity, ukuguqula, nesihlungi, umongo wokupakisha udalwa ngokuzenzakalelayo lapho amanani athile asetshenziswa.
Zama ukuqonda lokhu: Uma ucezu lwephepha (okungukuthi, into yengane) lungaphakathi kwefolda (okungukuthi, umongo wokunqwabelana komzali), alisoze laphuma kuleyo folda noma libekwe phakathi kwamaphepha kufolda ehlukile. I-z-index yayo manje isifaneleka kuphela ngaphakathi kwefolda yayo.
Emfanekisweni ongezansi, Iphepha B manje selingaphakathi komongo wokupakisha weFolda B, futhi linga-odwa kuphela namanye amaphepha kufolda.
Cabanga, uma uthanda, ukuthi unamafolda amabili etafuleni lakho:
.ifolda-a {z-inkomba: 1; } .ifolda-b {z-inkomba: 2; }
Ake sibuyekeze imakhaphu kancane. Ngaphakathi Kwefolda A yikhasi elikhethekile, z-index: 9999. Ngaphakathi Kwefolda B kunekhasi elingenalutho, z-index: 5.
.ikhasi elikhethekile { z-index: 9999; } .ikhasi elingenalutho { z-index: 5; }
Iliphi ikhasi elingaphezulu? Ikhasi elithi .plain kufolda B. Isiphequluli asiwaziba amaphepha engane futhi sinqwabelanisa amafolda amabili kuqala. Ibona Ifolda B (z-index: 2) bese iyibeka phezu kweFolda A (z-index: 1) ngoba siyazi ukuthi okubili kukhulu kunoyedwa. Ngaleso sikhathi, ikhasi elithi .special-isethelwe ku-z-index: 9999 page lingaphansi kwesitaki nakuba inkomba yayo engu-z isethwe kunani eliphezulu kakhulu elingenzeka. Izingqikithi zokunqwabelanisa zingafakwa futhi (amafolda ngaphakathi kwamafolda), kwakheka "isihlahla somndeni." Kusebenza isimiso esifanayo: ingane ayikwazi ukubalekela ifolda yabazali bayo. Manje njengoba usuthola ukuthi izimo zokunqwabelana ziziphatha kanjani njengamafolda aqoqa futhi ahlele kabusha izendlalelo, kufanelekile ukubuza: kungani izakhiwo ezithile - njengokuguqula nokufiphaza - zakha izimo ezintsha zokupakisha? Nansi into: lezi zakhiwo azidali izimo zokunqwabelana ngenxa yendlela ezibukeka ngayo; bakwenza ngenxa yokuthi isiphequluli sisebenza kanjani ngaphansi kwe-hood. Uma usebenzisa i-transform, opacity, filter, noma umbono, utshela isiphequluli, "Hey, le element ingase inyakaze, ijikelezise, noma ifiphele, ngakho-ke lungela!"
Uma usebenzisa lezi zici, isiphequluli sidala umongo wokustakika omusha ukuze uphathe ukunikezwa ngempumelelo kakhulu. Lokhu kuvumela isiphequluli ukuthi siphathe ukugqwayiza, ukuguqula, kanye nemiphumela ebonakalayo ngokuzimela, kunciphisa isidingo sokubala kabusha ukuthi lezi zici zisebenzisana kanjani nalo lonke ikhasi. Kucabange njengesiphequluli sithi, "Ngizophatha le folda ngokwehlukana ukuze kungadingeki ngilungise kabusha lonke ideski njalo lapho kushintsha okuthile ngaphakathi kuyo." Kodwa kukhonaumphumela ohlangothini. Uma isiphequluli siphakamisa isici sibe isendlalelo saso, kufanele "sicaba" yonke into engaphakathi kwaso, sidale umongo omusha wokupakisha. Kufana nokukhipha ifolda edeskini ukuze isingathe ngokuhlukana; yonke into engaphakathi kuleyo folda iqoqwa, futhi isiphequluli manje siyiphatha njengeyunithi eyodwa lapho sinquma ukuthi yini ehlala phezu kwalokho. Ngakho-ke noma izakhiwo zenguquko nokufiphaza zingase zingabonakali zithikameza indlela izinto ezinqwabelana ngayo ngokubukeka, ziyayenza, futhi okokuthuthukisa ukusebenza. Ezinye izici ze-CSS ezimbalwa zingadala izimo zokunqwabelanisa ngezizathu ezifanayo. I-MDN ihlinzeka ngohlu oluphelele uma ufuna ukumba ujule. Kukhona okumbalwa, okubonisa kuphela ukuthi kulula kangakanani ukwakha umongo wokupakisha ungaqondile ngaphandle kokwazi. Inkinga "Yokuqaqa". Izinkinga zokunqwabelanisa zingavela ngenxa yezizathu eziningi, kodwa ezinye zivame kakhulu kunezinye. Izingxenye ze-modal ziyiphethini yakudala ngoba zidinga ukuguqula ingxenye ukuze "ivuleke" kungqimba olungaphezulu ngaphezu kwazo zonke ezinye izakhi, bese iyisusa kungqimba olungaphezulu lapho "ivaliwe." Ngiyaqiniseka ukuthi sonke sike sabhekana nesimo lapho sivula khona i-modal futhi, nganoma yisiphi isizathu, ayiveli. Akukhona ukuthi ayizange ivuleke kahle, kodwa ukuthi ayibonakali engxenyeni engezansi yengqikithi yokunqwabelanisa. Lokhu kukushiya uzibuza ukuthi "kanjani?" njengoba usetha:
.imbondela { isikhundla: fixed; /* idala umongo wokupakisha */ z-inkomba: 1; /* ibeka isici phezu kwakho konke okunye */ isiqephu: 0; ububanzi: 100%; ukuphakama: 100vh; ukuchichima: kufihliwe; umbala wangemuva: #00000080; }
Lokhu kubukeka kulungile, kodwa uma isici somzali esiqukethe i-modal trigger iyisici sengane esingaphakathi kwenye ingxenye yomzali ephinde isethelwe ku-z-inkomba: 1, ebeka ngokobuchwepheshe i-modal kusendlalelo esingaphansi esisithwe ifolda eyinhloko. Ake sibheke leso simo esikhethekile kanye nezinye izingibe ezimbalwa ezivamile zokuqukethwe okunqwabelene. Ngicabanga ukuthi uzobona hhayi nje ukuthi kulula kangakanani ukudala izimo zokunqwabelanisa ungahlosile, kodwa nokuthi ungaziphathi kanjani. Futhi, ukuthi ubuyela kanjani esimweni esiphethwe kuncike esimweni. Isimo 1: Imodeli Ebanjiwe
Ungabona ngokushesha i-modal yakho ibambeke ezingeni eliphansi bese ukhomba umzali. Izandiso Zesiphequluli Onjiniyela abahlakaniphile bakhe izandiso ukusiza. Amathuluzi afana nalesi "CSS Stacking Context Inspector" isandiso se-Chrome sengeza ithebhu yenkomba engu-z eyengeziwe ku-DevTools yakho ukuze sikubonise ulwazi olumayelana nezinto ezidala umongo wokunqwabelanisa.
Izandiso ze-IDE Ungakwazi ngisho nokubona izinkinga phakathi nokuthuthukiswa ngesandiso esifana nalesi se-VS Code, esigqamisa izinkinga ezingase zibe khona zokunqwabelanisa ngokuqondile kumhleli wakho.
Ukukhipha futhi Ukubuyisela Ukulawula Ngemva kokuba sesiyitholile imbangela eyinhloko, isinyathelo esilandelayo ukubhekana nayo. Kunezindlela ezimbalwa ongazithatha ukuze uxazulule le nkinga, futhi ngizozibhala ngokulandelana kwazo. Ungakhetha noma ubani kunoma yiliphi izinga, noma; akekho ongakhononda noma avimbe omunye. Shintsha Isakhiwo Se-HTML Lokhu kuthathwa njengokulungiswa okuphelele. Ukuze ungene odabeni lokuqukethwe okunqwabelene, kufanele ngabe ubeke izinto ezithile ezindaweni ezihlekisayo ngaphakathi kwe-HTML yakho. Ukuhlela kabusha ikhasi kuzokusiza ukuthi ulolonge kabusha i-DOM futhi uqede inkinga yokuqukethwe kokunqwabelanisa. Thola isici esiyinkinga bese usisusa kusici esicuphayo kumakhaphu ye-HTML. Isibonelo, singaxazulula isimo sokuqala, "I-Trapped Modal," ngokususa i-.modal-container ngaphandle kwesihloko futhi sisibeke engxenyeni ye-
ngokwayo.Isihloko
Uma uchofoza inkinobho ethi "Vula Imodi", i-modal imiswa phambi kwakho konke okunye ngendlela okufanele ibe ngayo. Bheka I-Peni Scenario 1: I-Trapped Modal (Isixazululo) [ifakwe ngemfoloko] ngu-Shoyombo Gabriel Ayomide. Lungisa i-TheOkuqukethwe Kwesitaki Somzali Ku-CSS Kuthiwani uma i-elementi ingeyodwa awukwazi ukuyihambisa ngaphandle kokuphula isakhiwo? Kungcono ukubhekana nenkinga: umzali usungula umongo. Thola isici se-CSS (noma izakhiwo) ezinesibopho sokucupha umongo bese usisusa. Uma inenjongo futhi ingakwazi ukususwa, nikeza umzali inani eliphakeme lenkomba engu-z kunezinto ezizalanayo ukuze aphakamise sonke isiqukathi. Ngenani eliphakeme lika-z-inkomba, isiqukathi esingumzali siya phezulu, futhi izingane zaso zibonakala ziseduze nomsebenzisi. Ngokusekelwe kulokho esikufundile kusimo "Sokudonsela phansi Okucwile", asikwazi ukuhambisa okwehliswayo sikukhiphe ku-navbar; bekungeke kube nengqondo. Nokho, singakwazi ukukhuphula inani lenkomba engu-z lesiqukathi se-.navbar ukuze libe likhulu kunevelu yenkomba engu-z yesici sokuqukethwe. .i-navbar { ingemuva: #333; /* z-inkomba: 1; */ z-inkomba: 3; isikhundla: isihlobo; }
Ngalolu shintsho, imenyu yokudonsela phansi manje ivela phambi kokuqukethwe ngaphandle kwenkinga.
Bheka I-Peni Isimo 2: Ukwehla Okucwilisiwe (Isixazululo) [kufakwe ngemfoloko] ngu-Shoyombo Gabriel Ayomide.
Zama Amaphothali, Uma Usebenzisa Uhlaka
Kuzinhlaka ezifana ne-React noma i-Vue, Iphothali iyisici esikuvumela ukuthi unikeze ingxenye ngaphandle kwesigaba sayo esivamile sabazali ku-DOM. Amaphothali afana nedivayisi yokuxhumana yezingxenye zakho. Bakuvumela ukuthi unikeze i-HTML yengxenye noma yikuphi kudokhumenti (imvamisa kuye ngqo ku-document.body) kuyilapho uyigcina ixhumeke ngokunengqondo kumzali wayo wangempela ngezinsiza, isifunda, nemicimbi. Lokhu kulungele ukubalekela izingibe zomongo wokunqwabelanisa njengoba okukhiphayo okunikezwayo kuvela ngokoqobo ngaphandle kwesiqukathi esingumzali esiyinkinga.
ReactDOM.createPortal(
Lokhu kuqinisekisa ukuthi okuqukethwe kwakho okwehlayo akufihlwa ngemva komzali wakho, ngisho noma umzali enokuchichima: kufihliwe noma kunenkomba engu-z ephansi. Esimeni esithi “Ithulithiphu Elisikiwe” esike sasibheka ngaphambili, ngisebenzise Iphothali ukuze ngihlenge ithiphu yamathuluzi ekuchichimeni: isiqeshana esifihliwe ngokusibeka emzimbeni wedokhumenti futhi ngisibeke ngaphezu kwesibangeli ngaphakathi kwesiqukathi. Bheka Ipeni Isimo 3: Ithulithiphu Eyisikiwe (Isixazululo) [ifakwe ngemfoloko] nguShoyombo Gabriel Ayomide. Sethula Ingqikithi Yesitaki Ngaphandle Kwemithelela Emihle Zonke izindlela ezichazwe esigabeni esandulele zihloselwe "ukuqaqa" izici ezisuka kuzimo zokunqwabelana eziyinkinga, kodwa kunezimo ezithile lapho uzodinga khona ngempela noma ufune ukudala umongo wokupakisha. Ukudala umongo wokustakika omusha kulula, kodwa zonke izindlela ziza nomthelela oseceleni. Okusho ukuthi, ngaphandle kokusebenzisa ukuzihlukanisa: hlukanisa. Uma isetshenziswa ku-elementi, umongo wokunqwabelanisa wezingane zaleyo nto unqunywa ngokuhlobene nengane ngayinye futhi ngaphakathi kwalowo mongo, kunokuthonywa izici ezingaphandle kwayo. Isibonelo sakudala sinikeza leyo elementi inani elingafanele, njengenkomba ethi z: -1. Cabanga ukuthi unengxenye yekhadi. Ufuna ukwengeza umumo wokuhlobisa ohlezi ngemuva kombhalo we-.card, kodwa phezu kwengemuva lekhadi. Ngaphandle kwesitaki somongo ekhadini, u-z-inkomba: -1 ithumela umumo phansi komongo wokupakisha impande (lonke ikhasi). Lokhu kuyenza inyamalale ngemuva kwengemuva elimhlophe le-.card: Bheka I-Pen Negative z-index (inkinga) [ifakwe ngemfoloko] nguShoyombo Gabriel Ayomide. Ukuze kuxazululwe lokhu, simemezela ukuzihlukanisa: zihlukanise kumzali .card: Bheka I-Pen Negative z-index (isixazululo) [ifakwe ngemfoloko] nguShoyombo Gabriel Ayomide. Manje, i-elementi ye-.card ngokwayo iba umongo wokustakika. Uma i-elementi yengane yayo - umumo wokuhlobisa odalwe kokuthi :before-pseudo-element - inenkomba engu-z: -1, iya phansi impela komongo wokustakika womzali. Ihlala kahle ngemuva kombhalo nangaphezulu kwengemuva lekhadi, njengoba kuhlosiwe. Isiphetho Khumbula: ngokuzayo uma u-z-inkomba yakho ibonakala ingalawuleki, iwumongo wokupakisha ovalelekile. Izithenjwa
Isitaki umongo (MDN) Inkomba ye-Z nezimo zokunqwabelanisa (web.dev) "Ungawakha Kanjani Umongo Omusha We-Stacking Ngempahla Yokuzihlukanisa ku-CSS", u-Natalie Pina “What The Heck, z-index??”, Josh Comeau
Funda kabanzi ku-SmashingMag
"Ukuphatha i-CSS Z-Index In Large Projects", uSteven Frieson "Izihloko Ezinamathelayo Nezinto Zokuphakama Okugcwele: Inhlanganisela Ekhohlisayo", uPhilip Braunen "Ukuphatha Inkomba ye-Z Kuhlelo Lokusebenza Lwewebhu Olusekelwe Engxenyeni", uPavel Pomerantsev “I-Z-Index CSS Property: A Comprehensive Look”, uLouis Lazaris
