.iphepha elikhethekileyo { z-index: 9999; } .iphepha elicacileyo { z-index: 5; }

Leliphi iphepha elingaphezulu? Liphepha .elicacileyo kwiFolda B. Isikhangeli siyawahoya amaphepha omntwana kwaye sibeka iifolda ezimbini kuqala. Ibona iFolder B (z-index: 2) kwaye ibeka phezu kweFolder A (z-index: 1) kuba siyazi ukuba ezimbini zikhulu kunomnye. Okwangoku, i-.iphepha-elikhethekileyo limiselwe ku-z-index: iphepha le-9999 lisezantsi kwi-stack nangona i-index yayo ye-z imiselwe kwelona xabiso liphezulu elinokwenzeka. Imixholo yokupakisha inokubekwa kwindlwane (iifolda ngaphakathi kweefolda), ukwenza "umthi wosapho." Kusebenza umgaqo ofanayo: umntwana akanakuze abaleke kwifolda yabazali bakhe. Ngoku ufumana indlela yokupakisha imixholo eziphatha ngayo njengeefolda kwiqela kwaye uhlengahlengise iileya, kufanelekile ukubuza: kutheni iipropathi ezithile - ezinje ngoguqulo kunye nokungafihli - kudala iimeko ezintsha zokupakisha? Nantsi into: ezi zakhiwo azenzi iimeko zokupakisha ngenxa yendlela ezibukeka ngayo; bayenza ngenxa yendlela isikhangeli esisebenza ngayo phantsi kwe-hood. Xa ufaka inguqu, ukukhanya, isihluzi, okanye imbono, uxelela isikhangeli, "Heyi, le nto inokushukuma, ijikelezise, ​​okanye iphele, hlala ulungile!"

Xa usebenzisa ezi zakhiwo, isikhangeli senza umxholo omtsha wokupakisha ukulawula unikezelo ngokufanelekileyo. Oku kuvumela isikhangeli ukuba siphathe oopopayi, siguqule, kunye neziphumo ezibonwayo ngokuzimeleyo, kuncitshiswe imfuno yokubala kwakhona ukuba ezi zinto zidibana njani nephepha liphela. Yicinge njengesikhangeli sisithi, "Ndiza kuyiphatha ngokwahlukeneyo le folda ukuze ndingaphindi ndihlehle yonke idesika ngalo lonke ixesha into engaphakathi itshintsha." Kodwa kukhoisiphumo esisecaleni. Nje ukuba isikhangeli siphakamise into kumaleko aso, kufuneka "yicande" yonke into engaphakathi kuyo, yenze umxholo omtsha wokupakisha. Kufana nokuthatha ifolda kwidesika ukuyiphatha ngokwahlukeneyo; yonke into engaphakathi kolo lawulo idityaniswa, kwaye isikhangeli ngoku siyiphatha njengeyunithi enye xa sithatha isigqibo malunga nokuba yintoni na ehleli phezu kwento. Ke nangona iipropathi zenguqu kunye ne-opacity zisenokungabonakali zichaphazela indlela izinto eziqokelelana ngayo ngokubonakalayo, ziyayenza, kwaye yeyokuphucula ukusebenza. Ezinye iipropathi ezininzi ze-CSS nazo zinokudala iimeko zokupakisha ngenxa yezizathu ezifanayo. I-MDN ibonelela ngoluhlu olupheleleyo ukuba ufuna ukugrumba nzulu. Kukho ezimbalwa, ezibonisa kuphela indlela ekulula ngayo ukwenza umxholo wokupakisha ungaqondanga. Ingxaki "Yokukhupha". Imiba yokupakisha inokuvela ngenxa yezizathu ezininzi, kodwa ezinye ziqhelekile kunabanye. Amacandelo e-modal yipatheni yakudala kuba afuna ukuguqula icandelo ukuze "livule" kumaleko aphezulu ngaphezu kwazo zonke ezinye izinto, emva koko lisuse kumaleko aphezulu xa "livaliwe." Ndiqinisekile ukuba sonke siye sangena kwimeko apho sivula i-modal kwaye, ngenxa yaso nasiphi na isizathu, ayibonakali. Akunjalo ukuba ayizange ivuleke ngokufanelekileyo, kodwa ukuba ingaphandle kwembono kwinqanaba elingaphantsi lomxholo wokupakisha. Oku kukushiya uzibuza "njani?" oko useta:

.ukwaleka { indawo: ezinzileyo; /* yenza umxholo wokupakisha */ z-index: 1; /* ibeka isiqalelo kumaleko ngaphezu kwayo yonke enye into */ umxholo: 0; ububanzi: 100%; ukuphakama: 100vh; ukuphuphumala: kufihliwe; umbala ongasemva: #00000080; }

Oku kukhangeleka kulungile, kodwa ukuba umzali oqulathe i-modal trigger yinto yomntwana phakathi komnye umzali ekwasetelwe ku-z-index: 1, ebeka ngobuchwephesha i-modal kwi-sublayer efihliweyo sisiqulathi seefayili esingundoqo. Makhe sijonge imeko ethile kunye nesibini seminye imigibe eqhelekileyo yokupakisha. Ndicinga ukuba awuzukubona kuphela ukuba kulula kangakanani ukwenza iimeko zokupakisha ungaqondanga, kodwa nendlela yokungaziphathi kakuhle. Kwakhona, indlela obuyela ngayo kwisimo esilawulwayo kuxhomekeke kwimeko. Imeko 1: Imodali ebanjiweyo

Ungayibona kwangoko imodyuli yakho ibanjelwe kwinqanaba elisezantsi kwaye uchonge umzali. Izandiso zesikhangeli Abaphuhlisi abahlakaniphileyo bakhe izandiso zokunceda. Izixhobo ezinje nge "CSS Stacking Context Inspector" Ulwandiso lweChrome yongeza ithebhu ye-z-index kwi-DevTools yakho ukubonisa ulwazi malunga nezinto ezenza umxholo wokupakisha.

Izandiso ze-IDE Unokubona imiba ngexesha lophuhliso ngolwandiso olufana nolu lweKhowudi yeVS, eqaqambisa imiba enokubakho yokupakishwa komxholo ngqo kumhleli wakho.

Ukukhutshwa kunye nokubuyisela kwakhona uLawulo Emva kokuba sichonge oyena nobangela, inyathelo elilandelayo kukujongana nalo. Kukho iindlela ezininzi onokuthi uzithathe ukujongana nale ngxaki, kwaye ndiza kuzidwelisa ngokulandelelana. Unokukhetha nabani na nakweliphi na inqanaba, nangona kunjalo; akukho mntu unokukhalaza okanye athintele omnye. Tshintsha Ulwakhiwo lwe-HTML Oku kuthathwa njengolona lungiso lufanelekileyo. Ukuze ubaleke kumcimbi wokupakisha umxholo, kufuneka ubeke izinto ezithile kwiindawo ezihlekisayo ngaphakathi kweHTML yakho. Ukuhlengahlengisa iphepha kuya kukunceda wenze i-DOM kwakhona kwaye uphelise ingxaki yokupakisha umxholo. Fumana into eyingxaki kwaye uyisuse kwinto yokubambisa kuphawu lweHTML. Umzekelo, sinokusombulula imeko yokuqala, "I-Modal Trapped," ngokususa i-.modal-container ngaphandle kwesihloko kwaye sibeke kwi- element ngokwayo.