በእርስዎ CSS ውስጥ ባለው ኤለመንት ላይ z-index አዘጋጅተህ ታውቃለህ፣ እና ከሌሎች ንጥረ ነገሮች በላይ አይወጣም? ትልቅ እሴት ሁሉም የተለያዩ ንጥረ ነገሮች ዝቅተኛ ዋጋ ላይ ተቀምጠዋል ወይም ጨርሶ እንዳልተዘጋጁ በመገመት ያንን ንጥረ ነገር ከማንኛውም ነገር ላይ በምስላዊ መልኩ በቀላሉ ማስቀመጥ አለበት። አንድ ድረ-ገጽ ብዙውን ጊዜ በሁለት-ልኬት ቦታ ላይ ይወከላል; ነገር ግን፣ የተወሰኑ የሲኤስኤስ ንብረቶችን በመተግበር፣ ጥልቀትን ለማስተላለፍ ምናባዊ የ z-axis አውሮፕላን አስተዋውቋል። ይህ አውሮፕላን በማያ ገጹ ላይ ቀጥ ያለ ነው, እና ከእሱ, ተጠቃሚው የንጥረ ነገሮችን ቅደም ተከተል ይገነዘባል, አንዱ በሌላው ላይ. ከምናባዊው z-ዘንግ በስተጀርባ ያለው ሃሳብ፣ የተጠቃሚው ለተደራረቡ አካላት ያለው ግንዛቤ፣ እሱን የፈጠሩት የCSS ባህሪያት ተደባልቀው መደራረብ የምንለውን ነው። ኤለመንቶች በድረ-ገጽ ላይ እንዴት እንደሚደረደሩ፣ የቁልል ቅደም ተከተል ምን እንደሚቆጣጠር እና አስፈላጊ በሚሆንበት ጊዜ ኤለመንቶችን ስለ "ማራገፍ" ተግባራዊ አቀራረቦች እንነጋገራለን። ስለ መደራረብ አውዶች ድረ-ገጽህን እንደ ጠረጴዛ አስብ። የኤችቲኤምኤል ኤለመንቶችን ሲያክሉ፣ ወረቀቶችን አንድ በአንድ በጠረጴዛው ላይ እያስቀመጡ ነው። የተቀመጠው የመጨረሻው ወረቀት በጣም በቅርብ ጊዜ ከተጨመረው የኤችቲኤምኤል ኤለመንቱ ጋር እኩል ነው, እና ከሱ በፊት ከተቀመጡት ሁሉም ሌሎች ወረቀቶች ላይ ይቀመጣል. ይህ የተለመደው የሰነድ ፍሰት ነው, ለተሸከሙ አካላት እንኳን. ዴስክ ራሱ ሁሉንም ሌሎች አቃፊዎችን የያዘው በ ኤለመንት የተሰራውን የስር መደራረብ አውድ ይወክላል። አሁን፣ የተወሰኑ የሲኤስኤስ ባህሪያት ወደ ስራ ገብተዋል። እንደ አቀማመጥ (ከዚ-ኢንዴክስ ጋር)፣ ግልጽነት፣ ትራንስፎርሜሽን እና የያዙ) እንደ አቃፊ ይሰራሉ። ይህ ፎልደር አንድ ኤለመንትን እና ሁሉንም ልጆቹን ይወስዳል፣ ከዋናው ቁልል ውስጥ አውጥቶ ወደ የተለየ ንኡስ ቁልል ይቧድናቸዋል፣ ይህም እኛ መደራረብ አውድ የምንለውን ይፈጥራል። ለተቀመጡ ኤለመንቶች ይህ የሚሆነው ከአውቶ ውጪ የ z-index እሴትን ስናውቅ ነው። እንደ ግልጽነት፣ ትራንስፎርሜሽን እና ማጣሪያ ያሉ ንብረቶች የተወሰኑ እሴቶች ሲተገበሩ የቁልል አውድ በራስ-ሰር ይፈጠራል።
ይህንን ለመረዳት ሞክር፡ አንድ ጊዜ አንድ ወረቀት (ማለትም የልጅ አካል) በፎልደር ውስጥ ከገባ (ማለትም፣ የወላጅ መደራረብ አውድ) በፍፁም ከዚያ አቃፊ መውጣት ወይም በተለያየ አቃፊ ውስጥ ባሉ ወረቀቶች መካከል መቀመጥ አይችልም። የእሱ z-index አሁን የሚመለከተው በራሱ አቃፊ ውስጥ ብቻ ነው።
ከታች ባለው ስዕላዊ መግለጫ፣ ወረቀት B አሁን በአቃፊ B በተደራራቢ አውድ ውስጥ ነው፣ እና በአቃፊው ውስጥ ካሉ ሌሎች ወረቀቶች ጋር ብቻ ሊታዘዝ ይችላል።
ከፈለግክ በጠረጴዛህ ላይ ሁለት አቃፊዎች እንዳለህ አስብ።
አቃፊ-a { z-index: 1; } አቃፊ-b {z-index: 2; }
ምልክት ማድረጊያውን ትንሽ እናዘምነው። Inside Folder A ልዩ ገጽ ነው፣ z-index: 9999. Inside Folder B ግልጽ ገጽ ነው፣ z-index: 5.
.ልዩ-ገጽ {z-index: 9999; } ግልጽ-ገጽ {z-index: 5; }
የትኛው ገጽ ላይ ነው? በአቃፊ B ውስጥ ያለው ግልጽ-ገጽ ነው። አሳሹ የልጁን ወረቀቶች ችላ በማለት ሁለቱን አቃፊዎች መጀመሪያ ይቆልላቸዋል። ፎልደር B (z-index: 2) አይቶ በፎልደር A (z-index: 1) ላይ ያስቀምጠዋል ምክንያቱም ሁለቱ ከአንድ እንደሚበልጡ እናውቃለን። ይህ በእንዲህ እንዳለ፣ የ.ልዩ ገጽ ወደ z-ኢንዴክስ ተቀናብሯል፡ 9999 ገጹ ምንም እንኳን የ z-index ወደ ከፍተኛው እሴት ቢዋቀርም በቁልል ግርጌ ላይ ነው። የተደራረቡ አውዶች እንዲሁ (በአቃፊዎች ውስጥ ያሉ አቃፊዎች)፣ “የቤተሰብ ዛፍ” መፍጠር ይችላሉ። ተመሳሳይ መርህ ተግባራዊ ይሆናል-አንድ ልጅ ከወላጆቹ አቃፊ ፈጽሞ ማምለጥ አይችልም. አሁን የተደራረቡ አውዶች እንዴት እንደሚሰበሰቡ እና ንብርብሮችን እንደሚያስተካክሉ አቃፊዎች እንደሚሆኑ ስላወቁ፣ አንዳንድ ንብረቶች ለምንድነው - እንደ ትራንስፎርሜሽን እና ግልጽነት - አዲስ የተደራረቡ አውዶችን የሚፈጥሩት? ነገሩ እዚህ አለ: እነዚህ ንብረቶች በሚመስሉበት ሁኔታ ምክንያት የተደራረቡ ሁኔታዎችን አይፈጥሩም; እነሱ ያደርጉታል ምክንያቱም አሳሹ በኮፍያ ስር እንዴት እንደሚሰራ። ትራንስፎርሜሽን፣ ግልጽነት፣ ማጣሪያ ወይም እይታን ሲተገብሩ ለአሳሹ “ሄይ፣ ይህ ኤለመንት ሊንቀሳቀስ፣ ሊሽከረከር ወይም ሊደበዝዝ ይችላል፣ እና ዝግጁ ሁን!” እያልክ ነው።
እነዚህን ንብረቶች በሚጠቀሙበት ጊዜ አሳሹ አተረጓጎም በብቃት ለማስተዳደር አዲስ የተቆለለ አውድ ይፈጥራል። ይህ አሳሹ ራሱን ችሎ እነማዎችን፣ ለውጦችን እና የእይታ ውጤቶችን እንዲያስተናግድ ያስችለዋል፣ ይህም እነዚህ ንጥረ ነገሮች ከገጹ ጋር እንዴት እንደሚገናኙ እንደገና የማስላትን አስፈላጊነት ይቀንሳል። አሳሹ “በውስጡ የሆነ ነገር በተቀየረ ቁጥር መላውን ዴስክ እንዳላስተካክል ይህንን አቃፊ ለብቻዬ እይዘዋለሁ” እንደሚለው አስቡት። ግን አለየጎንዮሽ ጉዳት. አንዴ አሳሹ አንድን ኤለመንቱን ወደ ራሱ ንብርብር ካነሳ በኋላ በውስጡ ያለውን ነገር ሁሉ “ጠፍጣፋ” ማድረግ እና አዲስ የመደራረብ አውድ መፍጠር አለበት። ለብቻው ለማስተናገድ አቃፊን ከጠረጴዛው ላይ እንደ ማንሳት ነው; በአቃፊው ውስጥ ያሉት ሁሉም ነገሮች ይቦደዳሉ፣ እና አሳሹ አሁን በምን ላይ እንደሚቀመጥ ሲወስን እንደ አንድ አሃድ ይቆጥረዋል። ስለዚህ ምንም እንኳን የለውጡ እና ግልጽነት ባህሪያቱ ንጥረ ነገሮች በእይታ በሚከማቹበት መንገድ ላይ ተጽዕኖ ባይኖራቸውም ፣ እነሱ ያደርጉታል እና ለአፈፃፀም ማትባት ነው። ሌሎች በርካታ የሲኤስኤስ ንብረቶች ለተመሳሳይ ምክንያቶች የተደራረቡ አውዶችን መፍጠር ይችላሉ። በጥልቀት መቆፈር ከፈለጉ ኤምዲኤን የተሟላ ዝርዝር ያቀርባል። በጣም ጥቂት ናቸው፣ ሳያውቁት ሳያውቁ የተደራራቢ አውድ መፍጠር ምን ያህል ቀላል እንደሆነ ብቻ ያሳያል። "የማራገፍ" ችግር የተደራረቡ ጉዳዮች በብዙ ምክንያቶች ሊነሱ ይችላሉ, ግን አንዳንዶቹ ከሌሎቹ በጣም የተለመዱ ናቸው. የሞዳል አካላት ክላሲክ ንድፍ ናቸው ምክንያቱም ክፍሉን መቀያየር ከሌሎቹ ንጥረ ነገሮች በላይ በላይኛው ሽፋን ላይ “ለመክፈት” እና ከዚያ “ሲዘጋ” ከላይኛው ሽፋን ላይ ማውጣት ስለሚያስፈልጋቸው ነው። ሁላችንም ሞዳልን የምንከፍትበት ሁኔታ ውስጥ እንደገባን እርግጠኛ ነኝ, በማንኛውም ምክንያት, አይታይም. በትክክል አለመከፈቱ ሳይሆን በተደራራቢ አውድ ዝቅተኛ ንብርብር ከእይታ ውጪ መሆኑ ነው። ይህ “እንዴት ሆነ?” ብለው እንዲጠይቁ ያደርግዎታል። ካዘጋጀህበት ጊዜ ጀምሮ፡-
ተደራቢ { አቀማመጥ: ቋሚ; /* የመደራረብ አውድ ይፈጥራል */ z-ኢንዴክስ፡ 1; /* ኤለመንቱን ከምንም ነገር በላይ በንብርብር ላይ ያስቀምጣል */ ማስገቢያ፡ 0; ስፋት: 100%; ቁመት: 100vh; የተትረፈረፈ: የተደበቀ; ዳራ-ቀለም: # 00000080; }
ይህ ትክክል ይመስላል፣ ነገር ግን ሞዳል ቀስቅሴን የያዘው የወላጅ አካል በሌላ ወላጅ አካል ውስጥ ያለ ልጅ አካል ከሆነ እና ወደ z-index ተቀናብሯል፡ 1፣ ያ ሞዳልን በዋናው ፎልደር በተሸፈነ ንዑስ ተደራቢ ውስጥ በቴክኒክ ያስቀምጣል። ያንን ልዩ ሁኔታ እና ሌሎች ሁለት የተለመዱ የመደራረብ አውድ ወጥመዶችን እንይ። ባለማወቅ የተደራረቡ አውዶችን መፍጠር ምን ያህል ቀላል እንደሆነ ብቻ ሳይሆን እነሱን እንዴት በአግባቡ ማስተዳደር እንደሚቻልም የምታዩት ይመስለኛል። እንዲሁም ወደ የሚተዳደር ግዛት እንዴት እንደሚመለሱ እንደ ሁኔታው ይወሰናል. ሁኔታ 1፡ ወጥመድ ያለው ሞዳል
ወዲያውኑ የእርስዎን ሞዳል በዝቅተኛ ደረጃ ተይዞ ማየት እና ወላጁን መለየት ይችላሉ። የአሳሽ ቅጥያዎች ዘመናዊ ገንቢዎች ለማገዝ ቅጥያዎችን ገንብተዋል። እንደዚህ ያሉ መሳሪያዎች "CSS Stacking Context Inspector" Chrome ቅጥያ ተጨማሪ የz-index ትር ወደ DevTools ያክላል መደራረብን ስለሚፈጥሩ ንጥረ ነገሮች መረጃን ያሳያል።
አይዲኢ ቅጥያዎች በእድገት ጊዜ ችግሮችን እንኳን ለVS Code እንደዚህ ያለ ቅጥያ ማግኘት ይችላሉ፣ ይህም በቀጥታ በአርታዒዎ ውስጥ ሊደራረቡ የሚችሉ የአውድ ጉዳዮችን ያሳያል።
ማራገፍ እና እንደገና መቆጣጠር ዋናውን መንስኤ ካወቅን በኋላ, ቀጣዩ እርምጃ ችግሩን መቋቋም ነው. ይህንን ችግር ለመፍታት ሊወስዷቸው የሚችሏቸው ብዙ ዘዴዎች አሉ, እና በቅደም ተከተል እዘረዝራለሁ. ምንም እንኳን በማንኛውም ደረጃ ማንኛውንም ሰው መምረጥ ይችላሉ; ማንም ሰው ሌላውን ማጉረምረም ወይም ማደናቀፍ አይችልም. የኤችቲኤምኤል መዋቅር ለውጥ ይህ በጣም ጥሩው ማስተካከያ ተደርጎ ይቆጠራል። ወደ መደራረብ አውድ ጉዳይ ለመሮጥ፣ በኤችቲኤምኤልዎ ውስጥ አንዳንድ ክፍሎችን በአስቂኝ ቦታዎች ላይ ማስቀመጥ አለብዎት። ገጹን እንደገና ማዋቀር DOMን እንደገና እንዲቀርጹ እና የተደራራቢ አውድ ችግርን ለማስወገድ ይረዳዎታል። ችግር ያለበትን አካል ይፈልጉ እና በኤችቲኤምኤል ምልክት ማድረጊያ ውስጥ ካለው ወጥመድ ውስጥ ያስወግዱት። ለምሳሌ፣ የመጀመሪያውን ሁኔታ፣ "የተያዘው ሞዳል" .modal-container ን ከራስጌው በማውጣት እና በ<ሰውነት> አካል ውስጥ በማስቀመጥ መፍታት እንችላለን።
ይህ ይዘት z-index 2 አለው እና አሁንም ሞዳልን አይሸፍንም።ራስጌ
ዋና ይዘት
የ "ክፍት ሞዳል" ቁልፍን ጠቅ ሲያደርጉ ሞጁሉ ልክ እንደታሰበው በሁሉም ነገር ፊት ለፊት ነው. የብዕር ሁኔታውን 1 ይመልከቱ፡ የታሰረው ሞዳል (መፍትሄ) በሾዮምቦ ገብርኤል አዮሚድ (ሹካ)። አስተካክል።በCSS ውስጥ የወላጅ ቁልል አውድ አቀማመጡን ሳይጥሱ መንቀሳቀስ የማይችሉት ንጥረ ነገር አንድ ከሆነስ? ጉዳዩን መፍታት የተሻለ ነው: ወላጅ አውዱን ይመሰርታል. አውድ ለመቀስቀስ ኃላፊነት ያለውን የCSS ንብረት (ወይም ንብረቶች) አግኝ እና ያስወግዱት። ዓላማ ካለው እና ሊወገድ የማይችል ከሆነ ሙሉውን መያዣ ለማንሳት ለወላጅ ከወንድም እህት አባሎች የበለጠ የ z-index እሴት ይስጡት። ከፍ ባለ የ z-index እሴት፣ የወላጅ መያዣው ወደ ላይ ይንቀሳቀሳል፣ እና ልጆቹ ወደ ተጠቃሚው ቅርብ ሆነው ይታያሉ። በ"The Submerged Dropdown" scenario ውስጥ በተማርነው መሰረት ተቆልቋዩን ከናቭባር ውጭ ማንቀሳቀስ አንችልም። ትርጉም አይሰጥም። ነገር ግን፣ የ.navbar ኮንቴይነሩ z-ኢንዴክስ ዋጋ ከ.ይዘት ኤለመንቱ z-ኢንዴክስ እሴት የበለጠ እንዲሆን ማሳደግ እንችላለን። ናቭባር { ዳራ፡ # 333; /* z-ኢንዴክስ፡ 1; */ z-ኢንዴክስ፡ 3; ቦታ፡ ዘመድ; }
በዚህ ለውጥ፣ ተቆልቋይ-ሜኑ አሁን ያለ ምንም ችግር ከይዘቱ ፊት ለፊት ይታያል።
የብዕር ሁኔታን 2 ይመልከቱ፡ የተዘፈቀው ተቆልቋይ (መፍትሔ) በሾዮምቦ ገብርኤል አዮሚድ [የተቀጠቀጠ]።
ማዕቀፍ ከተጠቀሙ ፖርታልን ይሞክሩ
እንደ React ወይም Vue ባሉ ማዕቀፎች ውስጥ ፖርታል በDOM ውስጥ ካለው የወላጅ ተዋረድ ውጭ አንድ አካል እንዲሰጡ የሚያስችልዎ ባህሪ ነው። ፖርታል ለክፍለ ነገሮችዎ እንደ ቴሌፖርቴሽን መሳሪያ ነው። የአንድ አካል ኤችቲኤምኤል በሰነዱ ውስጥ በማንኛውም ቦታ (በተለምዶ በትክክል ወደ ሰነዱ.ሰው) እንዲያቀርቡ ያስችሉዎታል እንዲሁም ከዋናው ወላጅ ጋር ለግንባታ፣ ለግዛት እና ለክስተቶች በምክንያታዊነት እንዲገናኝ እያደረጉት ነው። የተገኘው ውጤት በትክክል ከችግር ካለው የወላጅ መያዣ ውጭ ስለሚታይ ይህ ከተደራራቢ አውድ ወጥመዶች ለማምለጥ ፍጹም ነው።
ReactDOM.ፍጠር ፖርታል(
ይህ የእርስዎ ተቆልቋይ ይዘት ከወላጁ ጀርባ እንደማይደበቅ ያረጋግጣል፣ ምንም እንኳን ወላጁ ሞልቶ ቢፈስስ፡ የተደበቀ ወይም ዝቅተኛ z-index። ቀደም ብለን በተመለከትነው "የተቀነጠቀው መሣሪያ" ትዕይንት የመሳሪያውን ጫፍ ከተትረፈረፈበት ለማዳን ፖርታል ተጠቀምኩ፡ የተደበቀ ክሊፕ በሰነዱ አካል ውስጥ በማስቀመጥ እና በመያዣው ውስጥ ካለው ቀስቅሴ በላይ በማስቀመጥ። የብዕር ትዕይንት 3 ይመልከቱ፡ የተቀነጨበ መሳሪያ (መፍትሄ) በሾዮምቦ ገብርኤል አዮሚድ [የተሰበረ]። የጎን ተፅዕኖዎች የሌሉበት የተቆለለ አውድ በማስተዋወቅ ላይ ባለፈው ክፍል የተብራሩት ሁሉም አቀራረቦች ችግር ካለባቸው የመደራረብ አውዶች ውስጥ ያሉትን ንጥረ ነገሮች "ለመንቀል" ዓላማ ያላቸው ናቸው፣ ነገር ግን እርስዎ በትክክል የሚደራረቡበት አውድ ለመፍጠር የሚያስፈልጓቸው ወይም የሚፈልጓቸው አንዳንድ ሁኔታዎች አሉ። አዲስ የተቆለለ አውድ መፍጠር ቀላል ነው፣ ነገር ግን ሁሉም አቀራረቦች የጎንዮሽ ጉዳት አላቸው። ማለትም ማግለል ከመጠቀም በስተቀር፡ ማግለል። በአንድ ኤለመንት ላይ ሲተገበር የዚያ ንጥረ ነገር ልጆች መደራረብ አውድ የሚወሰነው ከእያንዳንዱ ልጅ አንጻር እና በዚያ አውድ ውስጥ ነው፣ ከሱ ውጭ ባሉ አካላት ተጽዕኖ ከመሆን ይልቅ። የሚታወቀው ምሳሌ ያንን ኤለመንት አሉታዊ እሴት መመደብ ነው፣ እንደ z-index፡-1። የካርድ አካል እንዳለህ አስብ። ከካርዱ ጽሑፍ በስተጀርባ የተቀመጠ የጌጣጌጥ ቅርጽ ማከል ይፈልጋሉ ነገር ግን በካርዱ ጀርባ ላይ. በካርዱ ላይ ያለ መደራረብ አውድ፣ z-index: -1 ቅርጹን ወደ ስርወ መደራረብ አውድ (ሙሉ ገጹ) ግርጌ ይልካል። ይህ ከካርዱ ነጭ ጀርባ ጀርባ እንዲጠፋ ያደርገዋል፡- በሾዮምቦ ገብርኤል አዮሚዴ የተዘጋጀውን የብዕር አሉታዊ z-ኢንዴክስ (ችግር) ይመልከቱ። ይህንን ለመፍታት፣ ማግለልን እናውጃለን፡ በወላጅ .ካርዱ ላይ ማግለል፡- በሾዮምቦ ገብርኤል አዮሚዴ የተዘጋጀውን ብዕር አሉታዊ z-ኢንዴክስ (መፍትሔ) ይመልከቱ። አሁን፣ የ.ካርዱ አካል ራሱ የተቆለለ አውድ ይሆናል። የልጁ ንጥረ ነገር - በ: ከሐሰት-ኤለመንቱ በፊት የተፈጠረው የጌጣጌጥ ቅርጽ - z-index ሲኖረው፡ -1፣ ወደ ወላጅ መደራረብ አውድ ግርጌ ይሄዳል። እንደታሰበው ከጽሑፉ ጀርባ እና በካርዱ ጀርባ ላይ በትክክል ተቀምጧል. ማጠቃለያ ያስታውሱ፡ በሚቀጥለው ጊዜ የእርስዎ z-index ከቁጥጥር ውጭ በሚመስልበት ጊዜ፣ እሱ የታሰረ የመደራረብ አውድ ነው። ዋቢዎች
ቁልል አውድ (ኤምዲኤን) ዜድ-ኢንዴክስ እና መደራረብ አውዶች (web.dev) "በ CSS ውስጥ ካለው የመነጠል ንብረት ጋር አዲስ የተቆለለ አውድ እንዴት መፍጠር እንደሚቻል", ናታሊ ፒና "ምን ዘ ሄክ፣ z-index?"፣ Josh Comeau
በSmashingMag ላይ ተጨማሪ ንባብ
"CSS Z-Index በትልልቅ ፕሮጀክቶች ማስተዳደር", ስቲቨን ፍሬሰን "የሚጣበቁ ራስጌዎች እና ባለ ሙሉ ቁመት አባሎች፡ ተንኮለኛ ጥምረት"፣ ፊሊፕ ብራውንን። "በአካላት ላይ የተመሰረተ የድር መተግበሪያ ውስጥ ዜድ-ኢንዴክስን ማስተዳደር", ፓቬል ፖሜርንትሴቭ “የZ-ኢንዴክስ ሲኤስኤስ ንብረት፡ አጠቃላይ እይታ”፣ ሉዊስ ላዛሪስ
