ඔබ කවදා හෝ ඔබේ CSS හි මූලද්රව්යයක් මත z-දර්ශකය: 99999 සකසා ඇති අතර, එය අනෙකුත් මූලද්රව්යවලට ඉහළින් නොපැමිණෙන්නේද? සියලුම විවිධ මූලද්රව්ය අඩු අගයකින් හෝ සකසා නැතැයි උපකල්පනය කරමින්, විශාල අගයක් එම මූලද්රව්ය දෘශ්යමය වශයෙන් වෙනත් ඕනෑම දෙයක් මත පහසුවෙන් තැබිය යුතුය. වෙබ් පිටුවක් සාමාන්යයෙන් ද්විමාන අවකාශයක නිරූපණය කෙරේ; කෙසේ වෙතත්, නිශ්චිත CSS ගුණාංග යෙදීමෙන්, ගැඹුර ප්රකාශ කිරීම සඳහා මනඃකල්පිත z-අක්ෂ තලයක් හඳුන්වා දෙනු ලැබේ. මෙම තලය තිරයට ලම්බක වන අතර, එයින්, පරිශීලකයා මූලද්රව්ය අනුපිළිවෙල, එකක් මත එකක් වටහා ගනී. පරිකල්පනීය z-අක්ෂය පිටුපස ඇති අදහස, ගොඩගැසූ මූලද්රව්ය පිළිබඳ පරිශීලකයාගේ සංජානනය, එය නිර්මාණය කරන CSS ගුණාංග එකතු වී අපි ගොඩගැසීමේ සන්දර්භය ලෙස හඳුන්වන දෙය සෑදීමයි. අපි කතා කරන්න යන්නේ වෙබ් පිටුවක මූලද්රව්ය “ස්ටැක්” කරන්නේ කෙසේද, ගොඩගැසීමේ අනුපිළිවෙල පාලනය කරන්නේ කුමක්ද සහ අවශ්ය විටදී මූලද්රව්ය “අස්ථාපනය” කිරීමට ප්රායෝගික ප්රවේශයන් ගැන ය. සන්දර්භ ගොඩගැසීම ගැන ඔබේ වෙබ් පිටුව මේසයක් ලෙස සිතන්න. ඔබ HTML මූලද්රව්ය එකතු කරන විට, ඔබ කඩදාසි කැබලි එකින් එක මේසය මත තබයි. තැබූ අවසාන කඩදාසි කැබැල්ල ඉතා මෑතකදී එකතු කරන ලද HTML මූලද්රව්යයට සමාන වන අතර, එය ඊට පෙර තබා ඇති අනෙකුත් සියලුම පත්රිකා මත පිහිටා ඇත. කැදලි මූලද්රව්ය සඳහා පවා මෙය සාමාන්ය ලේඛන ප්රවාහයයි. අනෙක් සියලුම ෆෝල්ඩර අඩංගු මූලද්රව්ය මගින් සාදන ලද මූල ගොඩගැසීමේ සන්දර්භය ඩෙස්ක් එකම නියෝජනය කරයි. දැන්, නිශ්චිත CSS ගුණාංග ක්රියාත්මක වේ. පිහිටීම (z-දර්ශකය සහිත), පාරාන්ධතාව, පරිවර්තනය, සහ අන්තර්ගත වැනි ගුණාංග ෆෝල්ඩරයක් ලෙස ක්රියා කරයි. මෙම ෆෝල්ඩරය මූලද්රව්යයක් සහ එහි සියලුම දරුවන් ගෙන, ඒවා ප්රධාන තොගයෙන් උපුටා ගෙන, වෙනම උප-අට්ටියකට කාණ්ඩ කර, අපි ගොඩගැසීමේ සන්දර්භය ලෙස හඳුන්වන දේ නිර්මාණය කරයි. ස්ථානගත මූලද්රව්ය සඳහා, මෙය සිදුවන්නේ අප ස්වයංක්රීයව හැර වෙනත් z-දර්ශක අගයක් ප්රකාශ කරන විටය. පාරාන්ධතාව, පරිවර්තනය සහ පෙරහන වැනි ගුණාංග සඳහා, නිශ්චිත අගයන් යෙදූ විට ගොඩගැසීමේ සන්දර්භය ස්වයංක්රීයව නිර්මාණය වේ.
මෙය තේරුම් ගැනීමට උත්සාහ කරන්න: කඩදාසි කැබැල්ලක් (එනම්, ළමා මූලද්රව්යයක්) ෆෝල්ඩරයක් තුළ වූ පසු (එනම්, මාපියන්ගේ ගොඩගැසීමේ සන්දර්භය), එය කිසි විටෙකත් එම ෆෝල්ඩරයෙන් පිටවීමට හෝ වෙනත් ෆෝල්ඩරයක කඩදාසි අතර තැබිය නොහැක. එහි z-දර්ශකය දැන් අදාළ වන්නේ එහිම ෆෝල්ඩරය තුළ පමණි.
පහත රූප සටහනෙහි, B කඩදාසිය දැන් B ෆෝල්ඩරයේ ගොඩගැසීමේ සන්දර්භය තුළ ඇති අතර, ෆෝල්ඩරයේ ඇති අනෙකුත් කඩදාසි සමඟ පමණක් ඇණවුම් කළ හැක.
ඔබට අවශ්ය නම්, ඔබේ මේසය මත ෆෝල්ඩර දෙකක් ඇති බව සිතන්න:
.ෆෝල්ඩරය-a {z-දර්ශකය: 1; } .folder-b {z-index: 2; }
අපි සලකුණු කිරීම ටිකක් යාවත්කාලීන කරමු. ඇතුළත A ෆෝල්ඩරය විශේෂ පිටුවකි, z-දර්ශකය: 9999. ඇතුළත B ෆෝල්ඩරය සරල පිටුවකි, z-දර්ශකය: 5.
.special-page {z-index: 9999; } .plain-page {z-index: 5; }
ඉහළින් ඇති පිටුව කුමක්ද? එය B ෆෝල්ඩරයේ .plain-පිටුවයි. බ්රවුසරය ළමා පත්රිකා නොසලකා හරින අතර පළමුව ෆෝල්ඩර දෙක ගොඩ ගසයි. එය B ෆෝල්ඩරය (z-දර්ශකය: 2) දකින අතර එය A ෆෝල්ඩරය (z-දර්ශකය: 1) මත තබයි, මන්ද දෙක එකකට වඩා විශාල බව අප දන්නා බැවිනි. මේ අතර, .special-page set to z-index: 9999 පිටුව එහි z-දර්ශකය හැකි ඉහළම අගයට සකසා ඇතත්, තොගයේ පහළින් ඇත. ගොඩගැසීමේ සන්දර්භයන් ද කැදලි කළ හැක (ෆෝල්ඩර ඇතුළත ෆෝල්ඩර), "පවුල් ගසක්" නිර්මාණය කරයි. එකම මූලධර්මය අදාළ වේ: දරුවෙකුට කිසි විටෙකත් තම දෙමාපියන්ගේ ෆෝල්ඩරයෙන් ගැලවිය නොහැක. ස්ථර සමූහගත කරන සහ නැවත අනුපිළිවෙල කරන ෆෝල්ඩර මෙන් ගොඩගැසීමේ සන්දර්භ හැසිරෙන්නේ කෙසේදැයි දැන් ඔබට වැටහෙන බැවින්, එය ඇසීම වටී: සමහර ගුණාංග - පරිවර්තනය සහ පාරාන්ධතාව වැනි - නව ගොඩගැසීමේ සන්දර්භ නිර්මාණය කරන්නේ ඇයි? මෙන්න කාරණය: මෙම ගුණාංග ඒවා පෙනෙන ආකාරය නිසා ගොඩගැසීමේ සන්දර්භයන් නිර්මාණය නොකරයි; ඔවුන් එය කරන්නේ බ්රවුසරය ආවරණය යටතේ ක්රියා කරන ආකාරය නිසාය. ඔබ පරිවර්තනය, පාරාන්ධතාව, පෙරහන, හෝ ඉදිරිදර්ශනය යොදන විට, ඔබ බ්රවුසරයට කියන්නේ, "ඒයි, මෙම මූලද්රව්යය චලනය වීමට, භ්රමණය වීමට හෝ වියැකී යාමට ඉඩ ඇත, එබැවින් සූදානම් වන්න!"
ඔබ මෙම ගුණාංග භාවිතා කරන විට, විදැහුම්කරණය වඩාත් කාර්යක්ෂමව කළමනාකරණය කිරීමට බ්රවුසරය නව ගොඩකිරීමේ සන්දර්භයක් නිර්මාණය කරයි. මෙය බ්රවුසරයට සජීවිකරණ, පරිවර්තන සහ දෘශ්ය ප්රයෝග ස්වාධීනව හැසිරවීමට ඉඩ සලසයි, මෙම මූලද්රව්ය පිටුවේ ඉතිරි කොටස් සමඟ අන්තර් ක්රියා කරන ආකාරය නැවත ගණනය කිරීමේ අවශ්යතාවය අඩු කරයි. බ්රවුසරය පවසන පරිදි එය සිතන්න, “මම මෙම ෆෝල්ඩරය වෙන වෙනම හසුරුවන්නෙමි, එබැවින් එහි ඇතුළත යමක් වෙනස් වන සෑම අවස්ථාවකම මට මුළු මේසයම නැවත සකස් කිරීමට අවශ්ය නැත. නමුත් තියෙනවාඅතුරු ආබාධයකි. බ්රවුසරය මූලද්රව්යයක් එහිම ස්තරය තුළට එසවූ පසු, එය නව ගොඩකිරීමේ සන්දර්භයක් නිර්මාණය කරමින් එය තුළ ඇති සියල්ල “සමතලා” කළ යුතුය. එය වෙනම හැසිරවීමට ෆෝල්ඩරයක් මේසයෙන් ඉවතට ගැනීම වැනි ය; එම ෆෝල්ඩරය තුළ ඇති සෑම දෙයක්ම සමූහගත වන අතර, බ්රවුසරය දැන් එය තනි ඒකකයක් ලෙස සලකනු ලබන්නේ කුමක් දැයි තීරණය කිරීමේදීය. එබැවින් පරිණාමනය සහ පාරාන්ධතා ගුණාංග දෘශ්යමය වශයෙන් මූලද්රව්ය ගොඩගැසී ඇති ආකාරය කෙරෙහි බලපාන්නේ නැති බව පෙනෙන්නට තිබුණද, ඒවා එසේ කරයි, එය කාර්ය සාධන ප්රශස්තකරණය සඳහා වේ. තවත් CSS ගුණාංග කිහිපයකට සමාන හේතු නිසා ගොඩගැසීමේ සන්දර්භ නිර්මාණය කළ හැක. ඔබට ගැඹුරට හෑරීමට අවශ්ය නම් MDN සම්පූර්ණ ලැයිස්තුවක් සපයයි. ස්වල්පයක් ඇත, එය නොදැනුවත්වම ගොඩගැසීමේ සන්දර්භයක් නිර්මාණය කිරීම කොතරම් පහසුද යන්න පැහැදිලි කරයි. "Unstacking" ගැටළුව ගොඩගැසීමේ ගැටළු බොහෝ හේතු නිසා මතු විය හැකි නමුත් සමහර ඒවා අනෙක් ඒවාට වඩා පොදු වේ. මොඩල් සංරචක සම්භාව්ය රටාවක් වන්නේ ඒවාට අනෙක් සියලුම මූලද්රව්යවලට වඩා ඉහළ ස්ථරයක “විවෘත” කිරීමට සංරචකය ටොගල් කිරීම අවශ්ය වන නිසාත්, “වසා ඇති” විට එය ඉහළ ස්ථරයෙන් ඉවත් කිරීමටත් අවශ්ය වන බැවිනි. අපි හැමෝම මාදිලියක් විවෘත කරන තත්වයකට මුහුණ දී ඇති බවත්, කුමන හේතුවක් නිසා හෝ එය නොපෙනෙන බවත් මට හොඳටම විශ්වාසයි. එය නිසියාකාරව විවෘත නොවීම නොවේ, නමුත් එය ගොඩගැසීමේ සන්දර්භයේ පහළ ස්ථරයක නොපෙනේ. මෙය ඔබට "කොහොමද?" ඔබ සැකසූ දා සිට:
.වැඩිපෙළ { ස්ථානය: ස්ථාවර; /* ගොඩගැසීමේ සන්දර්භය නිර්මාණය කරයි */ z-දර්ශකය: 1; /* මූලද්රව්යය අන් සියල්ලටම වඩා ස්ථරයක් මත තබයි */ ඇතුල් කිරීම: 0; පළල: 100%; උස: 100vh; පිටාර ගැලීම: සැඟවුණු; පසුබිම් වර්ණය: #00000080; }
මෙය නිවැරදි බව පෙනේ, නමුත් මොඩල් ප්රේරකය අඩංගු මව් මූලද්රව්යය වෙනත් මාපිය මූලද්රව්යයක් තුළ ළමා මූලද්රව්යයක් නම්, එය z-දර්ශකය: 1 ට ද සකසා ඇත, එය තාක්ෂණිකව ප්රධාන ෆෝල්ඩරයෙන් අපැහැදිලි උප ස්ථරයක මොඩලය තබයි. අපි එම විශේෂිත අවස්ථාව සහ වෙනත් පොදු ගොඩගැසීමේ-සන්දර්භ අන්තරායන් කිහිපයක් දෙස බලමු. නොසැලකිලිමත් ලෙස ගොඩගැසීමේ සන්දර්භ නිර්මාණය කිරීම කොතරම් පහසු දැයි පමණක් නොව, ඒවා වැරදි ලෙස කළමනාකරණය කරන්නේ කෙසේදැයි ඔබට පෙනෙනු ඇතැයි මම සිතමි. එසේම, ඔබ කළමනාකරණය කළ තත්වයට ආපසු යන ආකාරය තත්වය මත රඳා පවතී. අවස්ථාව 1: උගුලට හසු වූ මාදිලිය
ඔබේ මොඩලය පහත් මට්ටමේ ස්ථරයක සිරවී ඇති බව ඔබට වහාම දැක බලා දෙමාපියන් හඳුනා ගත හැක. බ්රවුසර දිගු ස්මාර්ට් සංවර්ධකයින් උදවු කිරීමට දිගු ගොඩනගා ඇත. මෙම “CSS Stacking Context Inspector” වැනි මෙවලම් Chrome දිගුව ඔබේ DevTools වෙත අමතර z-දර්ශක පටිත්තක් එක් කර ඔබට ගොඩගැසීමේ සන්දර්භයක් නිර්මාණය කරන මූලද්රව්ය පිළිබඳ තොරතුරු පෙන්වයි.
IDE දිගු VS කේතය සඳහා මෙවැනි දිගුවක් සමඟින් ඔබට සංවර්ධනය අතරතුර ගැටලු හඳුනා ගැනීමට පවා හැකිය, එය ඔබේ සංස්කාරකය තුළ සෘජුවම ගොඩගැසීමේ සන්දර්භ ගැටලු ඉස්මතු කරයි.
ඉවත් කිරීම සහ පාලනය නැවත ලබා ගැනීම අපි මූලික හේතුව හඳුනා ගැනීමෙන් පසුව, ඊළඟ පියවර වන්නේ එය සමඟ කටයුතු කිරීමයි. මෙම ගැටළුව විසඳීම සඳහා ඔබට ගත හැකි ප්රවේශයන් කිහිපයක් ඇත, මම ඒවා පිළිවෙලට ලැයිස්තුගත කරමි. කෙසේ වෙතත්, ඔබට ඕනෑම මට්ටමක ඕනෑම අයෙකු තෝරා ගත හැකිය; කිසිවෙකුට තවත් කෙනෙකුට පැමිණිලි කිරීමට හෝ බාධා කිරීමට නොහැකිය. HTML ව්යුහය වෙනස් කරන්න මෙය හොඳම විසඳුම ලෙස සැලකේ. ඔබ ගොඩගැසීමේ සන්දර්භය ගැටලුවකට මුහුණ දීමට නම්, ඔබ ඔබේ HTML තුළ සමහර මූලද්රව්ය හාස්යජනක ස්ථානවල තබා තිබිය යුතුය. පිටුව ප්රතිව්යුහගත කිරීම ඔබට DOM නැවත හැඩගැස්වීමට සහ ගොඩගැසීමේ සන්දර්භය ගැටලුව ඉවත් කිරීමට උපකාරී වේ. ගැටළු සහගත මූලද්රව්යය සොයාගෙන එය HTML මාර්ක්අප් හි උගුල් මූලද්රව්යයෙන් ඉවත් කරන්න. උදාහරණයක් ලෙස, අපට .modal-container ශීර්ෂයෙන් පිටතට ගෙන ගොස් එය විසින්ම
මූලද්රව්යයේ තැබීමෙන්, "The Trapped Modal", පළමු අවස්ථාව විසඳාගත හැක.<ශීර්ෂ පන්තිය="ශීර්ෂකය">
ශීර්ෂකය
<ප්රධාන පන්තිය="අන්තර්ගතය">ප්රධාන අන්තර්ගතය
මෙම අන්තර්ගතයට 2 හි z-දර්ශකයක් ඇති අතර තවමත් මාදිලිය ආවරණය නොවේ.
ඔබ "විවෘත මාදිලිය" බොත්තම ක්ලික් කළ විට, මොඩලය අනෙක් සියල්ලටම ඉදිරියෙන් ස්ථානගත වේ. Shoyombo Gabriel Ayomide විසින් Pen Scenario 1: The Trapped Modal (විසඳුම) [forked] බලන්න. සකස් කරන්නCSS හි මාපිය ගොඩගැසීමේ සන්දර්භය මූලද්රව්යය පිරිසැලසුම බිඳ දැමීමකින් තොරව ඔබට චලනය කළ නොහැකි එකක් නම් කුමක් කළ යුතුද? ගැටලුව විසඳීමට වඩා හොඳය: දෙමව්පියන් සන්දර්භය ස්ථාපිත කරයි. සන්දර්භය අවුලුවාලීමට වගකිව යුතු CSS දේපල (හෝ ගුණාංග) සොයාගෙන එය ඉවත් කරන්න. එයට අරමුණක් තිබේ නම් සහ ඉවත් කළ නොහැකි නම්, සම්පූර්ණ බහාලුම එසවීම සඳහා එහි සහෝදර මූලද්රව්යවලට වඩා ඉහළ z-දර්ශක අගයක් දෙමාපියන්ට දෙන්න. ඉහළ z-දර්ශක අගයක් සමඟ, මව් බහාලුම ඉහළට ගමන් කරන අතර, එහි දරුවන් පරිශීලකයාට සමීපව දිස්වේ. "The Submerged Dropdown" දර්ශනයේ අප ඉගෙන ගත් දේ මත පදනම්ව, අපට පතන නව තීරුවෙන් පිටතට ගෙන යා නොහැක; එය තේරුමක් නැත. කෙසේ වෙතත්, අපට .navbar කන්ටේනරයේ z-දර්ශක අගය .content මූලද්රව්යයේ z-දර්ශක අගයට වඩා වැඩි කිරීමට වැඩි කළ හැක. .navbar { පසුබිම: #333; /* z-දර්ශකය: 1; */ z-දර්ශකය: 3; තනතුර: සාපේක්ෂ; }
මෙම වෙනස සමඟ, .dropdown-menu දැන් කිසිදු ගැටළුවක් නොමැතිව අන්තර්ගතය ඉදිරියෙන් දිස්වේ. Shoyombo Gabriel Ayomide විසින් Pen Scenario 2: The Submerged Dropdown (විසඳුම) [forked] බලන්න. රාමුවක් භාවිතා කරන්නේ නම් ද්වාර උත්සාහ කරන්න ප්රතික්රියා හෝ Vue වැනි රාමු තුළ, ද්වාරයක් යනු DOM තුළ එහි සාමාන්ය මාපිය ධුරාවලියෙන් පිටත සංරචකයක් ලබා දීමට ඔබට ඉඩ සලසන විශේෂාංගයකි. ද්වාර යනු ඔබේ සංරචක සඳහා ටෙලිපෝටේෂන් උපාංගයක් වැනිය. ඔවුන් ඔබට ලේඛනයේ ඕනෑම තැනක සංරචකයේ HTML විදැහුම් කිරීමට ඉඩ සලසයි (සාමාන්යයෙන් ලේඛනය.body වෙතට) එය තාර්කිකව එහි මුල් මාපිය සමඟ මුක්කු, තත්වය සහ සිදුවීම් සඳහා සම්බන්ධ කර තබා ගනී. විදැහුම්කරණය කරන ලද ප්රතිදානය වචනාර්ථයෙන් ගැටලුකාරී මව් කන්ටේනරයෙන් පිටත දිස්වන බැවින් ගොඩගැසීමේ සන්දර්භ උගුල්වලින් ගැලවීමට මෙය පරිපූර්ණ වේ. ReactDOM.createPortal( <මෙවලම් ඉඟි />, ලේඛනය.ශරීරය );
මෙය මාපියන්ට පිටාර ගැලීම ඇති වුවද, ඔබේ පතන අන්තර්ගතය එහි මාපියන් පිටුපස සැඟවී නැති බව සහතික කරයි: සැඟවුණු හෝ අඩු z-දර්ශකයක්. අප කලින් බැලූ “ද ක්ලිප්ඩ් ටූල්ටිප්” දර්ශනයේදී, මම මෙවලම් ඉඟිය පිටාර ගැලීමෙන් මුදා ගැනීමට ද්වාරයක් භාවිතා කළෙමි: සැඟවුණු ක්ලිප් එය ලේඛන ශරීරය තුළ තබා කන්ටේනරය තුළ ප්රේරකයට ඉහළින් ස්ථානගත කිරීමෙන්. Shoyombo Gabriel Ayomide විසින් Pen Scenario 3: The Clipped Tooltip (විසඳුම) [forked] බලන්න. අතුරු ආබාධ නොමැතිව ස්ටැකිං සන්දර්භය හඳුන්වා දීම පෙර කොටසේ විස්තර කර ඇති සියලුම ප්රවේශයන් ගැටළු සහගත ස්ටැකිං සන්දර්භවලින් මූලද්රව්ය “අලි ඉවත් කිරීම” අරමුණු කර ඇත, නමුත් ඔබට ඇත්ත වශයෙන්ම අවශ්ය හෝ ගොඩගැසීමේ සන්දර්භයක් නිර්මාණය කිරීමට අවශ්ය වන අවස්ථා තිබේ. නව ගොඩගැසීමේ සන්දර්භයක් නිර්මාණය කිරීම පහසුය, නමුත් සියලු ප්රවේශයන් අතුරු ආබාධයක් සමඟ පැමිණේ. එනම්, හුදකලා කිරීම භාවිතා කිරීම හැර: හුදකලා කිරීම. මූලද්රව්යයකට අදාළ වන විට, එම මූලද්රව්යයේ දරුවන්ගේ ගොඩගැසීමේ සන්දර්භය තීරණය වන්නේ එක් එක් දරුවාට සාපේක්ෂව සහ එම සන්දර්භය තුළ, ඉන් පිටත මූලද්රව්යවලට බලපෑම් කිරීමට වඩා. සම්භාව්ය උදාහරණයක් වන්නේ එම මූලද්රව්යයට z-දර්ශක: -1 වැනි සෘණ අගයක් පැවරීමයි. ඔබ සතුව .කාඩ් සංරචකයක් ඇතැයි සිතන්න. ඔබට .කාඩ්පතේ පෙළ පිටුපසින්, නමුත් කාඩ්පතේ පසුබිමට ඉහළින් ඇති අලංකාර හැඩයක් එක් කිරීමට අවශ්ය වේ. කාඩ්පත මත ගොඩගැසීමේ සන්දර්භයක් නොමැතිව, z-index: -1 හැඩය මූල ස්ටැකිං සන්දර්භයේ පහළට යවයි (මුළු පිටුවම). මෙය .කාඩ්පතේ සුදු පසුබිම පිටුපස එය අතුරුදහන් කරයි: Shoyombo Gabriel Ayomide විසින් Pen Negative z-index (ගැටලුව) [forked] බලන්න. මෙය විසඳීමට, අපි හුදකලාව ප්රකාශ කරමු: මාපිය .කාඩ්පත මත හුදකලා කරන්න: Shoyombo Gabriel Ayomide විසින් Pen Negative z-index (විසඳුම) [forked] බලන්න. දැන්, .කාඩ් මූලද්රව්යය ම ගොඩගැසීමේ සන්දර්භය බවට පත්වේ. එහි ළමා මූලද්රව්ය - :පෙර ව්යාජ මූලද්රව්ය මත නිර්මාණය කරන ලද අලංකාර හැඩය - z-දර්ශකය: -1 ඇති විට, එය මාපියන්ගේ ගොඩගැසීමේ සන්දර්භයේ පහළටම යයි. එය අපේක්ෂිත පරිදි, පෙළට පිටුපසින් සහ කාඩ්පතේ පසුබිමට ඉහළින් පරිපූර්ණව පිහිටා ඇත. නිගමනය මතක තබා ගන්න: ඊළඟ වතාවේ ඔබේ z-දර්ශකය පාලනයෙන් තොර බව පෙනෙන විට, එය සිරවී ඇති ගොඩගැසීමේ සන්දර්භයකි. යොමු කිරීම්
ගොඩගැසීමේ සන්දර්භය (MDN) Z-දර්ශකය සහ ගොඩගැසීමේ සන්දර්භ (web.dev) "CSS හි හුදකලා දේපල සමඟ නව ගොඩගැසීමේ සන්දර්භයක් නිර්මාණය කරන්නේ කෙසේද", නටාලි පිනා "මොකක්ද හෙක්, z-index??", Josh Comeau
SmashingMag පිළිබඳ වැඩිදුර කියවීම
"විශාල ව්යාපෘතිවල CSS Z-දර්ශකය කළමනාකරණය කිරීම", ස්ටීවන් ෆ්රයිසන් “ඇලෙන ශීර්ෂ සහ සම්පූර්ණ උස මූලද්රව්ය: උපක්රමශීලී සංයෝජනයක්”, පිලිප් බ්රවුන්න් "සංරචක පාදක වෙබ් යෙදුමක Z-දර්ශකය කළමනාකරණය කිරීම", Pavel Pomerantsev "Z-Index CSS දේපල: විස්තීර්ණ පෙනුමක්", ලුවී ලාසාරිස්
