z-index हे overlapping elements च्या समोर-मागे stacking order नियंत्रित करते — उच्च मूल्ये शीर्षावर बसतात. परंतु हे फक्त positioned elements वर काम करते, आणि हे stacking context च्या अंतर्गत कार्य करते, जो बहुतांश z-index गोंधळाचा स्रोत आहे.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index हे position: static (डिफॉल्ट) वर दुर्लक्ष केले जाते — हा element याचे लागू होण्यासाठी relative, absolute, fixed, किंवा sticky असणे आवश्यक आहे.
एक stacking context हा एक स्व-निहित "layer" आहे. z-index मूल्यांची स्पर्धा फक्त समान context मध्ये होते — एक child कधीही त्याच्या parent च्या stacking level पासून बाहेर निघू शकत नाही, तरी त्याचा 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 अजूनही काहीतरी मागे आहे" bug आहे — modal एका parent मध्ये अडकलेला आहे जो lower layer वर आहे.
अनेक properties मूकपणे हा तयार करतात, जे descendants ला अडकवू शकतात:
- 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 च्या शीर्षावर render करा (React portals) जेणेकरून ते low-layer parent मध्ये अडकले नाहीत.
Stacking contexts सर्वात गोंधळात टाकणारे z-index bugs समजतात: एक विशाल z-index जो अजूनही हरतो कारण त्याचा ancestor lower layer वर आहे.
हे जाणून की opacity, transform, आणि positioned-z-index contexts तयार करतात — आणि की children त्यांच्यापासून बाहेर निघू शकत नाहीत — तुम्हाला overlay/dropdown ordering debug करायला आणि तुमचा DOM (portals) योग्यरित्या structure करायला देते.