z-index ओवरलैपिंग तत्वों के आगे-पीछे स्टैकिंग क्रम को नियंत्रित करता है — उच्च मान शीर्ष पर बैठते हैं। लेकिन यह केवल स्थित तत्वों पर काम करता है, और यह एक stacking context के भीतर काम करता है, जो अधिकांश z-index भ्रम का स्रोत है।
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index को position: static (डिफ़ॉल्ट) पर अनदेखा किया जाता है — तत्व को relative, absolute, fixed, या sticky होना चाहिए ताकि यह लागू हो।
एक stacking context एक आत्मनिर्भर "परत" है। z-index मान केवल एक ही संदर्भ के भीतर प्रतिस्पर्धा करते हैं — एक बच्चा अपने माता-पिता के स्टैकिंग स्तर से कभी नहीं बच सकता, भले ही उसका 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 मोडल अभी भी कुछ के पीछे है" बग है — मोडल एक माता-पिता के अंदर फंसा है जो एक निचली परत पर है।
कई गुण मौन रूप से एक बनाते हैं, जो वंशजों को फंसा सकते हैं:
- 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 */
व्यावहारिक रूप से, modals/tooltips को DOM के शीर्ष पर प्रस्तुत करें (React portals) ताकि वे एक निचली-परत माता-पिता में फंसे न हों।
Stacking contexts सबसे भ्रामक z-index बग्स को समझाते हैं: एक विशाल z-index जो अभी भी हारता है क्योंकि इसके पूर्वज एक निचली परत पर हैं।
जानना कि opacity, transform, और positioned-z-index contexts बनाते हैं — और यह कि बच्चे उनसे बच नहीं सकते — आपको overlay/dropdown क्रम को डीबग करने और अपने DOM (portals) को सही तरीके से संरचित करने देता है।