Mkaguzi wa Z-Index unafunua mpangilio kamili wa kupanga wa kila kipengele kwenye ukurasa.
Mkaguzi wa Z-Index unafunua mpangilio kamili wa kupanga wa kila kipengele kwenye ukurasa.
Kila kipengele chenye thamani ya z-index kinapata overlay ya rangi isiyo na uwazi kabisa na beji ya lebo inayonyesha namba yake ya z-index. Thamani za juu za z-index hupata rangi za joto (nyekundu), thamani za chini hupata rangi za baridi (bluu). Upangaji wa tabaka wa kuona unafanya mpangilio wa kupanga ueleweke mara moja.
Jopo la pembeni linaorodhesha thamani zote za z-index zilizopatikana kwenye ukurasa, zilizopangwa kutoka ya juu kabisa (juu) hadi ya chini kabisa (chini). Kila ingizo linaonyesha thamani ya z-index, kiteuzi cha CSS au jina la darasa, na sifa ya nafasi (position). Bofya ingizo lolote ili kuangazia kipengele kinacholingana kwenye ukurasa.
Inatambua kila mpaka wa muktadha wa kupanga kwenye ukurasa na sifa ya CSS inayouunda — position: relative/absolute yenye z-index, transform, opacity < 1, filter, will-change, isolation: isolate, au contain: layout. Hizi zimeorodheshwa kando ili uweze kufuatilia kwa nini thamani ya z-index haifanyi kazi inavyotarajiwa.
Bofya tabaka lolote kwenye jopo ili kuliangazia na kusogeza hadi kwenye kipengele kinacholingana kwenye ukurasa. Au bofya kipengele chochote kilichoangaziwa kwenye ukurasa ili kukipata kwenye jopo la ramani ya tabaka. Vinjari mpangilio wa kupanga katika upande wowote unaokuvutia.
Kila ingizo la tabaka linaonyesha thamani ya nafasi ya CSS ya kipengele (static, relative, absolute, fixed, sticky) kwani z-index inatumika tu kwa vipengele vilivyowekwa nafasi. Tambua visa ambapo z-index imewekwa lakini nafasi ni static — hitilafu ya kawaida ambapo z-index haina athari yoyote.
Kwa kipengele chochote kilichochaguliwa, angalia mnyororo kamili wa muktadha wa kupanga wa mababu hadi kwenye mzizi. Elewa haswa ni muktadha wa kupanga wa babu gani unaozuia upeo wa z-index wa kipengele — ufahamu muhimu kwa kurekebisha hitilafu nyingi za z-index.
Modal yenye z-index: 9999 imefichwa nyuma ya sidebar yenye z-index: 10. Kivipi? Mkaguzi wa Z-Index anaonyesha kuwa mzazi wa modal ana position: relative na anaunda muktadha wa kupanga wenye z-index: 1, wakati mzazi wa sidebar ana z-index: 2. Modal haiwezi kamwe kutoka kwenye muktadha wa mzazi wake.
Menyu ya kuteremka inapotea nyuma ya sehemu inayofuata inapofunguka. Mkaguzi anafunua kuwa kontena ya menyu ina overflow: hidden (ambayo pia inaunda muktadha wa kupanga) au kwamba sehemu inayofuata ina z-index ya juu zaidi. Uangaziaji wa tabaka wa kuona unafanya mwingiliano uwe wazi.
Baada ya muda, thamani za z-index hujilimbikiza: 10, 100, 999, 9999, 99999. Ramani ya tabaka inaonyesha thamani zote zilizopangwa, ikifanya iwe rahisi kutambua kiwango halisi kinachohitajika na kurahisisha kwa kiwango safi (1, 2, 3, 10, 100).
Widget za soga, mabango ya kuki, na overlays za uchambuzi huweka vipengele vyenye thamani za juu za z-index. Mkaguzi wa Z-Index anaonyesha haswa thamani wanazotumia, akikusaidia kuweka thamani zako za z-index ipasavyo ili kuepuka migogoro.
Kagua muktadha wote wa kupanga kwenye ukurasa ili kuangalia zisizohitajika. Transforms, filters, na opacity zinazotumika kwa athari za kuona zinaweza kuunda muktadha wa kupanga bila kukusudia ambao unasababisha matatizo ya z-index mahali pengine. Orodha ya muktadha inazifanya zote kuonekana.
Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Z-Index Inspector. Chombo kinakagua ukurasa na kutambua kila kipengele chenye thamani ya z-index na kila mpaka wa muktadha wa kupanga.
Vipengele vyenye thamani za z-index vinapata overlays za rangi moja kwa moja kwenye ukurasa, zikiwa na lebo zinazoonyesha namba zao za z-index. Thamani za juu zinaonekana na rangi za joto, thamani za chini na rangi za baridi.
Fungua jopo la pembeni ili kuona tabaka zote za z-index zilizopangwa kutoka ya juu hadi ya chini. Kila ingizo linaonyesha thamani, kiteuzi, na sifa ya nafasi. Bofya ingizo lolote ili kuangazia kipengele kwenye ukurasa.
Sehemu ya "Stacking Contexts" ya jopo inaorodhesha kila kipengele kinachounda muktadha mpya wa kupanga na sifa ya CSS inayowajibika. Hii ndiyo siri ya kuelewa matatizo ya z-index.
Bofya kipengele chochote ili kuona mnyororo wa muktadha wa kupanga wa mababu — ni muktadha gani wa wazazi unaoathiri mpangilio wake wa utoaji. Fuata mnyororo kwenda juu ili kupata mpaka wa muktadha unaosababisha tatizo la kupanga.
Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.
