ኣብ CSS ናትካ ኣብ ሓደ ባእታ z-index: 99999 ኣቐሚጥካ ትፈልጥ’ዶ፣ ኣብ ልዕሊ ካልኦት ባእታታት ድማ ኣይወጽእን? ክንድዚ ዝኣክል ዓቢ ዋጋ፡ ኩሎም እቶም ዝተፈላለዩ ባእታታት ወይ ኣብ ዝተሓተ ዋጋ ተቐሚጦም ወይ ድማ ፈጺሞም ከምዘይተቐመጡ ብምግማት፡ ነቲ ባእታ ብዓይኒ ኣብ ልዕሊ ዝኾነ ነገር ብቐሊሉ ከቐምጦ ይግባእ። ሓደ መርበብ ሓበሬታ መብዛሕትኡ ግዜ ኣብ ክልተ-መኣዝናዊ ቦታ እዩ ዝውከል፤ እንተኾነ ግን ፍሉያት ባህርያት CSS ብምትግባር ዕምቆት ንምትሕልላፍ ምናባዊ z-axis plane ይተኣታቶ። እዚ ነፋሪት እዚ ምስቲ ስክሪን ንቕድሚት ዝቐጥን ኮይኑ፡ ካብኡ ድማ ተጠቃሚ ስርዓት ባእታታት፡ ሓደ ኣብ ልዕሊ እቲ ካልእ ይርዳእ። እቲ ድሕሪ’ቲ ምናባዊ z-axis ዘሎ ሓሳብ፡ ተጠቃሚ ኣብ ልዕሊ ዝተደራረቡ ባእታታት ዘለዎ ኣረኣእያ፡ እቶም ዝፈጥሩዎ ባህርያት CSS ተደሚሮም፡ ነቲ ንሕና ዝድምር ዓውደ-ጽሑፍ እንብሎ ይፈጥሩ። ብዛዕባ’ቲ ኣብ ሓደ መርበብ ሓበሬታ ባእታታት ብኸመይ “ዝድራረቡ”፡ ነቲ ስርዓት ምድማር ዝቆጻጸር እንታይ ምዃኑ፡ ከምኡ’ውን ኣብ ዘድልየሉ እዋን ባእታታት “ምፍታሕ” ዝጥቀሙሉ ግብራዊ ኣገባባት ክንዛረብ ኢና። ብዛዕባ ምድማር ዓውድታት መርበብ ሓበሬታኻ ከም ጠረጴዛ ጌርካ ሕሰቦ። ናይ ኤችቲኤምኤል ባእታታት እናወሰኽካ ከለኻ፡ ኣብ ልዕሊ’ቲ ጠረጴዛ፡ በብሓደ ድሕሪ ሓደ፡ ወረቐት ኣንቢርካ ኣለኻ። እቲ ናይ መወዳእታ ዝተቐመጠ ወረቐት ምስቲ ኣብ ቀረባ እዋን ዝተወሰኸ ኤችቲኤምኤል ባእታ ማዕረ ኮይኑ፡ ኣብ ልዕሊ ኩሎም ካልኦት ቅድሚኡ ዝተቐመጡ ወረቓቕቲ ኮፍ ይብል። እዚ ንቡር ዋሕዚ ሰነድ እዩ፣ ዋላ ንዝተሰፈሩ ባእታታት። እቲ ዴስክ ንባዕሉ ነቲ ብ ባእታ ዝቖመ ሱር ምድማር ዓውዲ ይውክል፣ እዚ ድማ ንኹሎም ካልኦት ኣቃፊራታት ዝሓዘ እዩ። ሕጂ፡ ፍሉያት ናይ CSS ባህርያት ኣብ ጸወታ ይኣትዉ። ከም position (ምስ z-index)፣ opacity፣ transform, and contain ዝኣመሰሉ ባህርያት ከም ፎልደር ይሰርሑ። እዚ ፎልደር እዚ ንሓደ ባእታን ንኹሎም ደቁን ወሲዱ ካብቲ ቀንዲ ስታክ ኣውጺኡ ኣብ ፍሉይ ንኡስ ስታክ ብምጥርናፍ ነቲ ንሕና ስታኪንግ ኮንትክስት እንብሎ ይፈጥር። ንዝተቐመጡ ባእታታት፡ እዚ ዝኸውን ካብ auto ወጻኢ ካልእ z-index ዋጋ ክንእውጅ ከለና እዩ። ከም ዘይንጹርነት፡ ትራንስፎርምን ፍልተርን ዝኣመሰሉ ባህርያት፡ ፍሉያት ክብርታት ኣብ ግብሪ ምስ ዝውዕሉ፡ እቲ ናይ ምድማር ዓውደ-ጽሑፍ ብኣውቶማቲክ ይፍጠር።
ነዚ ክትርድኦ ፈትን። ሕጂ z-index ናቱ ኣብ ውሽጢ ናይ ገዛእ ርእሱ ማህደር ጥራይ እዩ ኣገዳሲ።
ኣብዚ ኣብ ታሕቲ ዘሎ ስእሊ፡ ወረቐት B ሕጂ ኣብ ውሽጢ ምድማር ዓውዲ ናይ ፎልደር B ኮይኑ፡ ምስ ካልኦት ኣብቲ ፎልደር ዘለዉ ወረቓቕቲ ጥራይ እዩ ክእዘዝ ዝኽእል።
እንተደሊኻ ኣብ ጣውላኻ ክልተ ማህደር ከም ዘለካ እሞ ሕሰብ፤
.ፎልደር-a { z-ኢንዴክስ: 1; } .ፎልደር-b { z-ኢንዴክስ: 2; }
እስከ ቁሩብ ነቲ ማርካፕ ነዘምኖ። ኣብ ውሽጢ ማህደር A ፍሉይ ገጽ ኣሎ፣ z-index: 9999. ኣብ ውሽጢ ማህደር B ንጹር ገጽ ኣሎ፣ z-index: 5።
.ፍሉይ-ገጽ { z-index: 9999; } .plain-page { z-ኢንዴክስ: 5; }
ኣየናይ ገጽ እዩ ኣብ ላዕሊ ዘሎ? ኣብ Folder B ዘሎ .plain-page’ዩ።እቲ መርበብ ሓበሬታ ነቶም ቆልዑ ወረቓቕቲ ዕሽሽ ብምባል መጀመርታ ነተን ክልተ ፎልደራት ይደራረበን። ክልተ ካብ ሓደ ከም ዝዓቢ ስለ እንፈልጥ Folder B (z-index: 2) ርእዩ ኣብ ልዕሊ Folder A (z-index: 1) የቐምጦ። እዚ ከምዚ ኢሉ እንከሎ፡ እቲ .special-page ናብ z-index: 9999 ዝተቐመጠ ገጽ፡ ዋላ እኳ z-index ናቱ ናብ ዝለዓለ ዋጋ እንተተቐመጠ፡ ኣብ ታሕቲ ናይቲ ስታክ ኣሎ። ምድማር ዓውደ-ጽሑፋት (ኣብ ውሽጢ ኣቃፊራታት ዝርከቡ ኣቃፊራታት) እውን ክድፈሩ ይኽእሉ እዮም፣ እዚ ድማ “ገረብ ስድራቤት” ይፈጥር። ተመሳሳሊ መትከል’ውን ይምልከት፦ ሓደ ቆልዓ ካብ ማህደር ወለዱ ፈጺሙ ክሃድም ኣይክእልን እዩ። ሕጂ ምድማር ዓውደ-ጽሑፋት ከም ኣቃፊራታት ከመይ ከም ዝመላለሱ ምስ ረኸብካዮም፡ ንብርክታት ዝጥርንፉን ዳግማይ ዝስርዑን ኣቃፊራታት፡ ስለምንታይ’ዮም ዝተወሰኑ ባህርያት — ከም ትራንስፎርምን ዘይግሉጽነትን — ሓደስቲ ናይ ምድማር ዓውደ-ጽሑፋት ዝፈጥሩ? እቲ ነገር እንሆ፡ እዞም ንብረታት’ዚኣቶም ብሰንኪ’ቲ መልክዕ ዘለዎም ናይ ምድማር ዓውደ-ጽሑፋት ኣይፈጥሩን’ዮም፤ ንሳቶም ዝገብርዎ ድማ እቲ መርበብ ሓበሬታ ኣብ ትሕቲ ሽፋን ከመይ ከም ዝሰርሕ እዩ። ትራንስፎርም፡ ኦፓሲቲ፡ ፍልተር ወይ ፐርስፐክቲቭ ክትትግብር ከለኻ፡ ነቲ መርበብ ሓበሬታ፡ “እሂ፡ እዚ ባእታ’ዚ ክግዕዝ፡ ክዘውር ወይ ክሃስስ ይኽእል’ዩ፡ ስለዚ ድሉው ኩን!”
ነዞም ባህርያት ክትጥቀመሎም ከለኻ፡ እቲ መርበብ ሓበሬታ ንምቕራብ ብዝያዳ ብብቕዓት ንምምሕዳር ሓድሽ ናይ ምድማር ዓውደ-ጽሑፍ ይፈጥር። እዚ ድማ እቲ መርበብ ሓበሬታ ንኣኒሜሽን፣ ትራንስፎርሜሽንን ቪዥዋል ኢፌክትን ብናጻ ክሕዞ የኽእሎ፣ እዚ ድማ እዞም ባእታታት ምስ ዝተረፈ ገጽ ብኸመይ ከም ዝራኸቡ ዳግማይ ምሕሳብ ዘድልዮ ምዃኑ ይንኪ። ከምቲ መርበብ ሓበሬታ “እዚ ፎልደር’ዚ ብፍሉይ ክሕዞ’የ፡ ምእንቲ ኣብ ውሽጡ ዘሎ ነገር ኣብ ዝቕየርሉ እዋን ንብምልኡ እቲ ዴስክ ዳግማይ ክቕይሮ ከየድልየኒ” ዝብል ሕሰቦ። ግን ኣሎ።ጎናዊ ሳዕቤን እዩ። እቲ መርበብ ሓበሬታ ንሓደ ባእታ ናብ ናይ ገዛእ ርእሱ ንጣብ ምስ ኣልዓሎ፡ ኣብ ውሽጡ ንዘሎ ኩሉ “ክጸፍሖ” ኣለዎ፡ እዚ ድማ ሓድሽ ናይ ምድማር ዓውዲ ክፈጥር ኣለዎ። ልክዕ ከም’ቲ ንሓደ ፎልደር ካብ ጣውላ ወሲድካ ብፍሉይ ክትሕዞ፤ ኣብ ውሽጢ እቲ ማህደር ዘሎ ኩሉ ነገር ይጥርነፍ፣ ሕጂ ድማ እቲ መርበብ ሓበሬታ እንታይ ኣብ ልዕሊ እንታይ ኮፍ ይብል ክውስን ከሎ ከም ሓደ ኣሃዱ ይሕዞ። ስለዚ ዋላ’ኳ እቶም ናይ ትራንስፎርምን ኦፓሲቲን ባህርያት ነቲ ባእታታት ብዓይኒ ዝድምርሉ ኣገባብ ዝጸልዉ ዘይመስሉ እንተኾኑ፡ ይገብሩ እዮም፡ ንኣፈጻጽማ ምምሕያሽ’ውን’ዩ። ካልኦት ሓያሎ ናይ CSS ባህርያት እውን ብተመሳሳሊ ምኽንያት ናይ ምድማር ዓውድታት ክፈጥሩ ይኽእሉ እዮም። MDN ብዕምቆት ክትኩዕት እንተደሊኻ ምሉእ ዝርዝር ይህብ። ውሑዳት እዮም፣ እዚ ድማ ብዘይ ፍላጥ ከይፈለጥካ ምድማር ዓውደ-ጽሑፍ ምፍጣር ክሳብ ክንደይ ቀሊል ምዃኑ ጥራይ እዩ ዘርኢ። እቲ “ምፍታሕ” ዝብል ጸገም ናይ ምድማር ሕቶታት ብብዙሕ ምኽንያታት ክለዓሉ ይኽእሉ እዮም፡ ገሊኦም ግን ካብ ካልኦት ዝያዳ ልሙዳት እዮም። ሞዳል ኣካላት ክላሲካል ቅዲ እዮም ምኽንያቱ ነቲ ክፍሊ ልዕሊ ኩሎም ካልኦት ባእታታት ኣብ ላዕለዋይ ንጣብ “ክኽፈት” ምቕያር ስለዘድልዮም፣ ድሕሪኡ “ተዓጽዩ” ካብቲ ላዕለዋይ ንጣብ ምእላይ። ኩላትና ሞዳል እንኸፍተሉን ብዝኾነ ምኽንያት ዘይረኣየሉን ኩነታት ከምዘጋጠመና ርግጸኛ’የ። ብግቡእ ስለዘይተኸፍተ ዘይኮነስ ኣብ ታሕተዋይ ንጣብ ናይ’ቲ ምድማር ዓውዲ ካብ ምርኣይ ወጻኢ ምዃኑ’ዩ። እዚ ድማ “ከመይ ኢሉ?” ካብ ኣቐሚጥካ፤
.ድርብ { . መርገጺ: ጽኑዕ፤ /* ነቲ ናይ ምድማር ዓውደ-ጽሑፍ ይፈጥር */ z-index: 1፤ /* ነቲ ባእታ ኣብ ልዕሊ ኩሉ ነገር ኣብ ንጣር የቐምጦ */ ምትእትታው: 0; ስፍሓት: 100%፤ ቁመት: 100vh፤ overflow: ዝተሓብአ፤ ድሕረ ባይታ-ሕብሪ: #00000080; }
እዚ ቅኑዕ ይመስል፣ እንተኾነ ግን እቲ ሞዳል ትሪግር ዝሓዘ ወላዲ ባእታ ኣብ ውሽጢ ካልእ ወላዲ ባእታ ውላድ ባእታ እንተኾይኑ ንሱ’ውን ናብ z-index: 1 ዝተቐመጠ እንተኾይኑ፣ እዚ ብቴክኒካዊ መዳይ ነቲ ሞዳል ኣብቲ ብቐንዲ ማህደር ዝተደብዘዘ ንኡስ ንጣብ የቐምጦ። እስከ ነቲ ፍሉይ ስናርዮን ካልእ ሓደ ክልተ ልሙዳት ናይ ምድማር-ዓውደ-ጽሑፍ መጻወድያታትን ንርአ። ብዘይ ፍላጥ ምድማር ዓውደ-ጽሑፋት ምፍጣር ክሳብ ክንደይ ቀሊል ምዃኑ ጥራይ ዘይኮነስ፡ ብኸመይ ብጌጋ ከም እተመሓድሮም’ውን ክትዕዘቡ ኢኹም ዝብል ግምት ኣለኒ። ከምኡ’ውን ናብ ዝምራሕ ኩነታት ብኸመይ ከም እትምለስ ኣብቲ ኩነታት ይምርኮስ። 1ይ ተርእዮ፡ እቲ ተዓጽዩ ዘሎ ሞዳል
ብኡንብኡ ሞዳልካ ኣብ ትሑት ደረጃ ንጣብ ተዓጽዩ ክትሪኦን ነቲ ወላዲ ከተለልዮን ትኽእል። ናይ መርበብ ሓበሬታ መቐጸልታታት ስማርት ዲቨሎፐራት ንኽሕግዙ ኤክስቴንሽን ሃኒጾም ኣለዉ። ከምዚ ዝኣመሰለ መሳርሒታት “CSS Stacking Context Inspector” Chrome extension ተወሳኺ z-index tab ኣብ DevTools ይውስኹልካ ብዛዕባ stacking context ዝፈጥሩ ባእታታት ሓበሬታ ንምርኣይ።
ናይ IDE መቐጸልታታት ኣብ እዋን ምዕባለ ከይተረፈ ብኸምዚ ዝኣመሰለ ኤክስቴንሽን ንVS Code ክትዕዘብ ትኽእል ኢኻ፣ እዚ ድማ ብቐጥታ ኣብ ኤዲተርካ ክህልዉ ዝኽእሉ ናይ ምድማር ዓውደ-ጽሑፋት ጉዳያት የጉልሕ።
Unstacking And Regaining Control ሱር ጠንቂ ምስ ኣለለና፡ እቲ ዝቕጽል ስጉምቲ ምግጣሙ’ዩ። ነዚ ጸገም’ዚ ንምፍታሕ ክትወስዶም እትኽእል ሓያሎ ኣገባባት ኣለዉ፡ ብቕደም ተኸተል ድማ ክዝርዝሮም’የ። ኣብ ዝኾነ ደረጃ ንዝኾነ ሰብ ክትመርጽ ትኽእል ኢኻ ግን፤ ዝኾነ ሰብ ንኻልእ ከማርር ወይ ክዕንቅፍ ኣይክእልን እዩ። ንኣቃውማ ኤችቲኤምኤል ምቕያር እዚ ድማ ከም ዝበለጸ ምእራም ይቑጸር። ኣብ ናይ ምድማር ዓውደ-ጽሑፍ ጉዳይ ንኽትጎዪ፡ ገለ ባእታታት ኣብ ውሽጢ ኤችቲኤምኤልካ ኣብ መስሓቕ ቦታታት ኣቐሚጥካዮ ክትከውን ኣለካ። ነቲ ገጽ ዳግማይ ምውዳብ ነቲ DOM ዳግማይ ቅርጺ ክትህቦን ነቲ ናይ ምድማር ዓውደ-ጽሑፍ ጸገም ከተወግዶን ይሕግዘካ። ነቲ ጸገም ዘለዎ ባእታ ረኺብካ ካብቲ ኣብቲ HTML markup ዘሎ መጻወድያ ባእታ ኣውጽኣዮ። ንኣብነት፡ ነቲ ቀዳማይ ስናርዮ፡ “The Trapped Modal”፡ ነቲ .modal-container ካብቲ ርእሲ ኣውጺእና ኣብቲ
ባእታ ባዕሉ ብምቕማጥ ክንፈትሖ ንኽእል።<ርእሲ ክፍሊ="ርእሲ">
ርእሲ
ዝብል ጽሑፍ ኣሎ። <ቀንዲ ክፍሊ="ትሕዝቶ">ቀንዲ ትሕዝቶ
እዚ ትሕዝቶ z-index 2 ኣለዎ ሕጂ ውን ነቲ ሞዳል ኣይሽፍንን እዩ።
ዝብል ጽሑፍ ኣሎ።
ሞዳል ኣርእስቲ
ሕጂ፡ ድሕሪ ዝኾነ ነገር ኣይኮንኩን። ብሰንኪ ዳግመ ውደባ ዶም ዝሓሸ ቦታ ረኺበ ኣለኹ።
“Open Modal” ዝብል ቁልፊ ምስ ጠወቕካ፡ እቲ ሞዳል ከምቲ ክኸውን ዝግበኦ ኣብ ቅድሚ ኩሉ ካልእ ይቕመጥ። ብርዒ ስናርዮ 1: እቲ ዝተዓጽወ ሞዳል (ፍታሕ) [forked] ብሾዮምቦ ጋብሪኤል ኣዮሚደ ርአ። ኣስተኻኽል እቲ...ወላዲ ምድማር ዓውደ-ጽሑፍ ኣብ CSS እቲ ባእታ ነቲ ኣቀማምጣ ከይሰበርካ ክትግዕዞ ዘይትኽእል እንተኾይኑኸ? ነቲ ጉዳይ ምፍታሕ ይሓይሽ: እቲ ወላዲ ነቲ ዓውዲ’ዩ ዘቐምጦ። ነቲ ዓውደ-ጽሑፍ ንምብጋስ ሓላፍነት ዘለዎ ናይ CSS ንብረት (ወይ ንብረታት) ረኺብካ ኣወግዶ። ዕላማ እንተሃልይዎን ክእለ እንተዘይክኢሉን፡ ነቲ ወላዲ ካብ ኣሕዋቱ ባእታታት ዝለዓለ z-index ዋጋ ሃቦ ንብምሉኡ እቲ መትሓዚ ንምልዓል። ዝለዓለ z-index ዋጋ ምስ ዝህልዎ፡ እቲ ወላዲ መትሓዚ ናብ ላዕሊ ይኸይድ፡ ደቁ ድማ ናብቲ ተጠቃሚ ዝቐረቡ ይረኣዩ። ኣብ “The Submerged Dropdown” scenario ካብ ዝተማሃርናዮ መሰረት ብምግባር፡ ነቲ dropdown ካብ navbar ከነግዕዞ ኣይንኽእልን ኢና፤ ትርጉም ኣይምሃለዎን። ይኹን እምበር፡ ናይቲ .navbar ኮንተይነር z-index ዋጋ ካብቲ .content element’s z-index value ክዓቢ ክንውስኾ ንኽእል። .ናቭባር { . ድሕረ ባይታ፡ #333፤ /* z-ኢንዴክስ: 1; */ z-index: 3፤ መርገጺ፡ ተዛማዲ፤ }
በዚ ለውጢ ሕጂ .dropdown-menu ብዘይ ዝኾነ ጸገም ኣብ ቅድሚ እቲ ትሕዝቶ ይረአ። ብርዒ ስናርዮ 2: እቲ ኣብ ትሕቲ ማይ ዝነበረ ምውዳቕ (ፍታሕ) [forked] ብሾዮምቦ ጋብሪኤል ኣዮሚደ ርአ። ፖርታላት ፈትኑ፣ ፍሬምዎርክ ትጥቀም እንተኾይንኩም ኣብ ከም React ወይ Vue ዝኣመሰሉ ፍሬምዎርክታት፡ ፖርታል ንሓደ ክፍሊ ካብቲ ንቡር ወላዲ ስርዓተ-መሰረቱ ወጻኢ ኣብ DOM ክትሰርሖ ዘኽእለካ ባህሪ እዩ። ፖርታላት ንኣካላትካ ከም ቴሌፖርቴሽን መሳርሒ እዮም። ንሳቶም ኣብ ዝኾነ ቦታ ናይቲ ሰነድ (ብተለምዶ ትኽ ኢሉ ናብ document.body) ናይ ሓደ ክፍሊ HTML ከተቕርቦ የኽእሉኻ፣ ንፕሮፕስ፣ ስቴትን ፍጻሜታትን ድማ ምስቲ መበቆላዊ ወላዲኡ ብስነመጎታዊ መንገዲ ተተሓሒዙ ይጸንሕ። እዚ እቲ ዝተቐረጸ ውጽኢት ቃል ብቓሉ ካብቲ ጸገም ዘለዎ ወላዲ መትሓዚ ወጻኢ ስለ ዝረአ ካብ መጻወድያታት ምድማር ዓውደ-ጽሑፍ ንምህዳም ፍጹም እዩ። ReactDOM.createፖርታል( <መሳርሒ ምኽሪ />, ሰነድ.ኣካል );
እዚ ድማ ዋላ’ውን እቲ ወላዲ ምፍሳስ እንተሃለዎ፡ እቲ ንቑልቁል ዝወርድ ትሕዝቶኻ ብድሕሪ ወላዲኡ ከምዘይሕባእ የረጋግጽ: ተሓቢኡ ወይ ታሕተዋይ z-index። ኣብቲ ኣቐዲምና ዝረኣናዮ “The Clipped Tooltip” ዝብል ስናርዮ፡ ነቲ tooltip ካብቲ ምፍሳስ ንምድሓን Portal ተጠቒመሉ፡ ኣብ ኣካል ሰነድ ብምቕማጥን ኣብ ልዕሊ እቲ ትሪግር ኣብ ውሽጢ ኮንተይነር ብምቕማጥን ዝተሓብአ ክሊፕ። ብርዒ ስናርዮ 3: እቲ ዝተቖርጸ መሳርሒ (ፍታሕ) [forked] ብሾዮምቦ ጋብሪኤል ኣዮሚደ ርአ። ምትእትታው ብዘይ ጎናዊ ሳዕቤን ናይ ምድማር ዓውደ-ጽሑፍ ኩሎም ኣብ ዝሓለፈ ክፋል ዝተገልጹ ኣገባባት ካብ ጸገም ዘለዎም ናይ ምድማር ዓውደ-ጽሑፋት ባእታታት “ንምፍታሕ” ዝዓለሙ’ኳ እንተኾኑ፡ ብሓቂ ግን ናይ ምድማር ዓውደ-ጽሑፍ ክትፈጥር ዘድልየካ ወይ ክትደሊ እትደልየሉ ገለ ኩነታት ኣሎ። ሓድሽ ናይ ምድማር ዓውደ-ጽሑፍ ምፍጣር ቀሊል እዩ፡ ኩሎም ኣገባባት ግን ጎናዊ ሳዕቤን ዘለዎም እዮም። ማለት ብዘይካ ምጥቃም ተነጽሎ: ተነጽሎ። ኣብ ሓደ ባእታ ክውዕል ከሎ፡ እቲ ናይ ምድማር ዓውደ-ጽሑፍ ናይቶም ደቂ’ቲ ባእታ፡ ካብኡ ወጻኢ ብዘለዉ ባእታታት ካብ ዝጽሎ፡ ብተዛማዲ ምስ ነፍሲ ወከፍ ቆልዓን ኣብ ውሽጢ’ቲ ዓውደ-ጽሑፍን’ዩ ዝውሰን። ሓደ ክላሲካል ኣብነት ነቲ ባእታ ኣሉታዊ ዋጋ ምምዳብ እዩ፣ ከም z-index: -1። .card ዝበሃል ክፍሊ ኣለካ እሞ ሕሰብ። ብድሕሪ ጽሑፍ ናይ’ቲ .ካርድ ኮፍ ዝብል ስልማት ቅርጺ ክትውስኽ ትደሊ፣ ግን ኣብ ልዕሊ ድሕረ ባይታ ናይ’ታ ካርድ። ኣብቲ ካርድ ብዘይ ናይ ምድማር ዓውደ-ጽሑፍ፡ z-index: -1 ነቲ ቅርጺ ናብ ታሕቲ ናይቲ ሱር ምድማር ዓውደ-ጽሑፍ (ምሉእ ገጽ) ይሰዶ። እዚ ድማ ብድሕሪ’ቲ ጻዕዳ ድሕረ ባይታ ናይ’ቲ .card ከም ዝጠፍእ ይገብሮ፤ ብርዒ ኣሉታዊ z-index (ጸገም) [forked] ብሾዮምቦ ጋብሪኤል ኣዮሚደ ርአ። ነዚ ንምፍታሕ ድማ ተነጽሎ ንእውጅ: isolate on the parent .card: ብርዒ ኣሉታዊ z-index (ፍታሕ) [forked] ብሾዮምቦ ጋብሪኤል ኣዮሚደ ርአ። ሕጂ፡ እቲ .card ዝበሃል ባእታ ንባዕሉ ናይ ምድማር ዓውደ-ጽሑፍ ይኸውን። ውላድ ባእታኡ — እቲ ኣብ :ቅድሚ ስውር ባእታ ዝተፈጥረ ስልማት ቅርጺ — z-index: -1 ምስ ዝህልዎ፡ ናብ ኣዝዩ ታሕተዋይ ክፋል ናይቲ ወላዲ ዝድምር ዓውደ-ጽሑፍ ይኸይድ። ከምቲ ዝተሓሰበ ብድሕሪ’ቲ ጽሑፍን ኣብ ልዕሊ’ቲ ድሕረ ባይታ ናይ’ታ ካርድን ፍጹም ኮፍ ይብል። መደምደምታ ዘክር: ኣብ ዝቕጽል ግዜ z-index ናትካ ካብ ቁጽጽር ወጻኢ ኮይኑ ኣብ ዝረኣየሉ እዋን፡ ዝተዓጽወ ናይ ምድማር ዓውደ-ጽሑፍ’ዩ። መወከሲታት
ምድማር ዓውደ-ጽሑፍ (MDN) Z-indexን ናይ ምድማር ዓውድታትን (web.dev) “ከመይ ጌርካ ኣብ CSS ብናይ ተነጽሎ ንብረት ሓድሽ ናይ ምድማር ዓውደ-ጽሑፍ ንፈጥር”፡ ናታሊ ፒና “ዋት ዘ ሄክ፡ z-index??”፡ ጆሽ ኮሜው
ተወሳኺ ንባብ ኣብ SmashingMag
“ምምሕዳር ሲኤስኤስ ዜድ-ኢንዴክስ ኣብ ዓበይቲ ፕሮጀክትታት”፡ ስቲቨን ፍሪሰን “ተጣባቒ ርእስን ምሉእ ቁመት ዘለዎም ባእታታትን፡ ብልሓት ዘለዎ ውህደት”፡ ፊሊፕ ብራውነን። “ምምሕዳር ዜድ-ኢንዴክስ ኣብ ኮምፖነንት-መሰረት ዝገበረ ዌብ ኣፕሊኬሽን”፣ ፓቨል ፖመርንሰቭ “እቲ Z-Index CSS ንብረት: ኩለመዳያዊ ትርኢት”፣ ሉዊስ ላዛሪስ
