Z-Index መርማሪ በድረ-ገጽ ላይ ያለውን የእያንዳንዱ ኤለመንት ሙሉ ተደራራቢ ቅደም ተከተል ያሳያል። z-index ዋጋ ያለው ማንኛውም ኤለመንት በቀጥታ በገጹ ላይ ጎልቶ ይታያል እና ይሰየማል፣ እና በተደረደረ የሽፋን ካርታ ፓነል ውስጥ ሁሉም z-index ሽፋኖች ከታች ወደ ላይ ይታያሉ። በ position፣ transform፣ opacity እና ሌሎች CSS ባህሪያት የተፈጠሩ ተደራራቢ አውዶችን ይለያል — z-index ችግሮችን ማስተካከል ምስላዊ እና ቀላል ያደርገዋል።
Z-index ስህተቶች በ CSS ውስጥ ከሚያበሳጩ ችግሮች ውስጥ ናቸው። ከሁሉም ነገር በላይ ሊታይ የሚገባው modal ከ sidebar ጀርባ ተደብቋል። Dropdown ሜኑ ከቀጣዩ ክፍል ጀርባ ይጠፋል። Tooltip ይጠፋል ምክንያቱም ወላጅ ኤለመንት ያልተጠበቀ ተደራራቢ አውድ ይፈጥራል። ዋናው ምክንያት ሁልጊዜ ማለት ይቻላል ተደራራቢ አውዶች እንዴት እንደሚሰሩ ያለመረዳት ነው — እና የአሳሹ DevTools ለማሳየት ምንም ማለት ይቻላል አይረዳም። Z-Index መርማሪ የማይታየውን ይጋልጣል። ግልፅ z-index ያለው ማንኛውም ኤለመንት ቀለማማ ሽፋን እና ዋጋውን የሚያሳይ ስያሜ ያገኛል። በተደረደረ የሽፋን ካርታ ፓነል ሁሉም z-index ዋጋዎች ከዝቅተኛው (ታች) ወደ ከፍተኛው (ላይ) ተዘርዝረው ይታያሉ፣ ማንኛውም CSS ክፍል ወይም ኤለመንት ለየትኛው ዋጋ እንደሆነ ያሳያል። ከሁሉም በላይ ግን፣ መሣሪያው ተደራራቢ አውድ ወሰኖችን ይለያል — position + z-index፣ transform፣ opacity < 1፣ filter፣ will-change ወይም isolation በኩል አዲስ ተደራራቢ አውዶችን የሚፈጥሩ ኤለመንቶች። የትኛው አያት ተደራራቢ አውዱን እንደፈጠረ መረዳት ብዙውን ጊዜ z-index ስህተቶችን ለማስተካከል ቁልፉ ነው።
z-index ዋጋ ያለው ማንኛውም ኤለመንት ግማሽ-ግልፅ ቀለማማ ሽፋን እና z-index ቁጥሩን የሚያሳይ ስያሜ ባጅ ያገኛል። ከፍተኛ z-index ዋጋዎች ሞቃት ቀለሞች (ቀይ)፣ ዝቅተኛዎቹ ቀዝቃዛ ቀለሞች (ሰማያዊ) ያገኛሉ። ምስላዊ ሽፋኑ ተደራራቢ ቅደም ተከተሉን ወዲያውኑ ግልፅ ያደርገዋል።
ጎን ፓነል በገጹ ላይ የተገኙ ሁሉንም z-index ዋጋዎች ከከፍተኛ (ላይ) ወደ ዝቅተኛ (ታች) ተደርድረው ይዘረዝራል። እያንዳንዱ ግቤት የ z-index ዋጋውን፣ የ CSS ምርጫን ወይም ክፍል ስም እና የ position ባህሪን ያሳያል። በገጹ ላይ ተዛማጅ ኤለመንቱን ለማድመቅ ማንኛውንም ግቤት ጠቅ ያድርጉ።
በገጹ ላይ ያለውን ማንኛውንም ተደራራቢ አውድ ወሰን እና የፈጠረውን CSS ባህሪ ይለያል — ከ z-index ጋር position: relative/absolute፣ transform፣ opacity < 1፣ filter፣ will-change፣ isolation: isolate ወይም contain: layout። z-index ዋጋ ለምን እንደተጠበቀው እንደማይሰራ ለማወቅ ለብቻ ይዘረዝራሉ።
በገጹ ላይ ተዛማጅ ኤለመንቱን ለማድመቅ እና ለመሸብለል በፓነል ውስጥ ማንኛውንም ሽፋን ጠቅ ያድርጉ። ወይም በገጹ ላይ ማንኛውንም በጎላ ኤለመንት ጠቅ ያድርጉ በሽፋን ካርታ ፓነል ውስጥ ለማግኘት። ተደራራቢ ቅደም ተከተሉን በሚፈልጉት አቅጣጫ ያሰሱ።
እያንዳንዱ ሽፋን ግቤት የኤለመንቱን CSS position ዋጋ (static፣ relative፣ absolute፣ fixed፣ sticky) ያሳያል ምክንያቱም z-index ለ positioned ኤለመንቶች ብቻ ይሰራል። z-index ተቀምጦ ግን position static የሆኑ ሁኔታዎችን ያግኙ — z-index ምንም ውጤት የሌለው የተለመደ ስህተት።
ለማንኛውም የተመረጠ ኤለመንት፣ እስከ ስር ድረስ ያሉትን የአያት ተደራራቢ አውዶች ሙሉ ሰንሰለት ይመልከቱ። የየትኛው አያት ተደራራቢ አውድ የኤለመንቱን z-index ወሰን እንደሚገድብ በትክክል ይረዱ — ለአብዛኛው z-index ችግሮች ማስተካከል ቁልፉ ግንዛቤ ይህ ነው።
z-index: 9999 ያለው modal ከ z-index: 10 ያለው sidebar ጀርባ ተደብቋል። እንዴት? Z-Index መርማሪ የ modal ወላጅ position: relative ያለው እና z-index: 1 ያለው ተደራራቢ አውድ የሚፈጥር መሆኑን ያሳያል፣ የ sidebar ወላጅ ደግሞ z-index: 2 አለው። Modal ከወላጁ አውድ ፈጽሞ ሊወጣ አይችልም።
Dropdown ሜኑ ሲከፈት ከቀጣዩ ክፍል ጀርባ ይጠፋል። መርማሪው የሜኑ ኮንቴይነር overflow: hidden (ተደራራቢ አውድ የሚፈጥር) እንዳለው ወይም ቀጣዩ ክፍል ከፍ ያለ z-index እንዳለው ያሳያል። ምስላዊ ሽፋን ማድመቅ መደራረቡን ግልፅ ያደርገዋል።
ከጊዜ ብዛት z-index ዋጋዎች ይከማቻሉ: 10፣ 100፣ 999፣ 9999፣ 99999። ሽፋን ካርታው ሁሉንም ዋጋዎች ተደርድረው ያሳያል፣ ይህም ገሃድ ያስፈለገውን ክልል ለመለየት እና ወደ ንጹህ ልኬት (1፣ 2፣ 3፣ 10፣ 100) ለማቅለል ቀላል ያደርገዋል።
Chat widgets፣ ኩኪ ባነሮች እና analytics ሽፋኖች ከፍተኛ z-index ዋጋ ያላቸው ኤለመንቶችን ያስገባሉ። Z-Index መርማሪ ምን ዋጋዎች እንደሚጠቀሙ በትክክል ያሳያል፣ ይህም ግጭቶችን ለማስወገድ የራስዎን z-index ዋጋዎች በትክክል ለማቀናበር ይረዳል።
አላስፈላጊ ተደራራቢ አውዶችን ለመፈተሽ በገጹ ላይ ያሉ ሁሉንም ተደራራቢ አውዶች ይገምግሙ። ለእይታ ውጤቶች የተተገበሩ transforms፣ filters እና opacity ባልታሰበ ሁኔታ በሌላ ቦታ z-index ችግሮችን የሚያስከትሉ ተደራራቢ አውዶችን ሊፈጥሩ ይችላሉ። የአውድ ዝርዝር ሁሉንም ይጋልጣል።
የ DevSuite Pro ተንሳፋፊ ዶክን ይክፈቱ እና Z-Index መርማሪ አዶን ጠቅ ያድርጉ። መሣሪያው ገጹን ይቃኛል እና z-index ዋጋ ያለውን ማንኛውንም ኤለመንት እና ማንኛውንም ተደራራቢ አውድ ወሰን ይለያል።
z-index ዋጋ ያላቸው ኤለመንቶች በቀጥታ በገጹ ላይ ቀለማማ ሽፋኖች ያገኛሉ፣ z-index ቁጥሮቻቸውን የሚያሳዩ ስያሜዎች ጋር። ከፍተኛ ዋጋዎች ሞቃት ቀለሞች፣ ዝቅተኛዎቹ ቀዝቃዛ ቀለሞች ያሳያሉ።
ሁሉንም z-index ሽፋኖች ከከፍተኛ ወደ ዝቅተኛ ተደርድረው ለማየት ጎን ፓነሉን ይክፈቱ። እያንዳንዱ ግቤት ዋጋውን፣ ምርጫውን እና position ባህሪውን ያሳያል። በገጹ ላይ ኤለመንቱን ለማድመቅ ማንኛውንም ግቤት ጠቅ ያድርጉ።
የፓነሉ \"ተደራራቢ አውዶች\" ክፍል አዲስ ተደራራቢ አውድ የሚፈጥር ማንኛውንም ኤለመንት እና ተጠያቂ የሆነውን CSS ባህሪ ይዘረዝራል። ይህ ብዙውን ጊዜ z-index ችግሮችን ለመረዳት ቁልፉ ነው።
የአያት ተደራራቢ አውድ ሰንሰለቱን ለማየት ማንኛውንም ኤለመንት ጠቅ ያድርጉ — የትኞቹ ወላጅ አውዶች የ rendering ቅደም ተከተሉን እንደሚጎዱ። ተደራራቢ ችግሩን የሚያስከትለውን አውድ ወሰን ለማግኘት ሰንሰለቱን ወደ ላይ ይከታተሉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
