z-index ले अप्ठेरो हुने एलिमेन्टहरूको अगाडि-पछाडिको स्ट्याकिङ अर्डर नियन्त्रण गर्छ — उच्च मानहरू माथि बस्छन्। तर यो केवल positioned एलिमेन्टहरूमा काम गर्छ, र यो एक stacking context भित्र काम गर्छ, जो अधिकांश z-index भ्रमको स्रोत हो।n
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index लाई position: static (डिफल्ट) मा बेवास्ता गरिन्छ — यो लागु हुनको लागि एलिमेन्ट relative, absolute, fixed, वा sticky हुनुपर्छ।
एक stacking context एक आत्मनिर्भर "layer" हो। z-index मानहरू केवल एउटै context भित्र प्रतिस्पर्धा गर्छन् — एक बच्चा यसको z-index कति पनि उच्च भए पनि यसको आबाल को स्ट्याकिङ लेभल बाहिर निस्कन सक्दैन।
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }
.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/* because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
यो क्लासिक "मेरो z-index: 9999 modal अझै पनि केहि कुरा पछाडि छ" बग हो — modal एक अग्रज भित्र फसिएको छ जो एक तल्लो लेभरमा छ।
धेरै गुणहरूले चुपचाप एक सर्जना गर्छन्, जसले वंशजहरूलाई फसाउन सक्छ:
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
व्यवहारमा, DOM को माथिमा modals/tooltips रेन्डर गर्नुहोस् (React portals) ताकि तिनीहरू कम-layer अग्रजमा फसिने छैनन्।
Stacking contexts सबैभन्दा भ्रामक z-index bugs को व्याख्या गर्छन्: एक विशाल z-index जो अझै पनि हरायो किनभने यसको अग्रज एक तल्लो लेभरमा छ।
यो जानेर कि opacity, transform, र positioned-z-index ले contexts सर्जना गर्छन् — र कि बच्चाहरू तिनीहरूबाट बाहिर निस्कन सक्दैनन् — तपाईंलाई overlay/dropdown अर्डरिङ डिबग गर्न र आपनो DOM (portals) सही संरचना गर्न दिन्छ।