क्या आपने कभी अपने सीएसएस में किसी तत्व पर z-index: 99999 सेट किया है, और यह अन्य तत्वों के शीर्ष पर नहीं आता है? एक मान जो बड़ा है उसे आसानी से उस तत्व को किसी भी अन्य चीज़ के शीर्ष पर रखना चाहिए, यह मानते हुए कि सभी अलग-अलग तत्व या तो कम मान पर सेट हैं या बिल्कुल भी सेट नहीं हैं। एक वेबपेज आमतौर पर द्वि-आयामी स्थान में दर्शाया जाता है; हालाँकि, विशिष्ट सीएसएस गुणों को लागू करके, गहराई बताने के लिए एक काल्पनिक z-अक्ष विमान पेश किया जाता है। यह तल स्क्रीन के लंबवत है, और इससे उपयोगकर्ता एक के ऊपर एक, तत्वों के क्रम को समझता है। काल्पनिक ज़ेड-अक्ष के पीछे का विचार, उपयोगकर्ता की स्टैक्ड तत्वों की धारणा, यह है कि सीएसएस गुण जो इसे बनाते हैं, जिसे हम स्टैकिंग संदर्भ कहते हैं, उसे बनाने के लिए संयोजित होते हैं। हम इस बारे में बात करने जा रहे हैं कि किसी वेबपेज पर तत्वों को "स्टैक" कैसे किया जाता है, स्टैकिंग क्रम को कौन नियंत्रित करता है, और जरूरत पड़ने पर तत्वों को "अनस्टैक" करने के लिए व्यावहारिक दृष्टिकोण क्या है। स्टैकिंग संदर्भों के बारे में अपने वेबपेज को एक डेस्क के रूप में कल्पना करें। जैसे ही आप HTML तत्व जोड़ते हैं, आप डेस्क पर एक के बाद एक कागज के टुकड़े बिछाते हैं। रखा गया कागज का आखिरी टुकड़ा सबसे हाल ही में जोड़े गए HTML तत्व के बराबर है, और यह इसके पहले रखे गए अन्य सभी कागजों के शीर्ष पर बैठता है। नेस्टेड तत्वों के लिए भी यह सामान्य दस्तावेज़ प्रवाह है। डेस्क स्वयं रूट स्टैकिंग संदर्भ का प्रतिनिधित्व करता है, जो तत्व द्वारा निर्मित होता है, जिसमें अन्य सभी फ़ोल्डर शामिल होते हैं। अब, विशिष्ट सीएसएस गुण चलन में आते हैं। स्थिति (जेड-इंडेक्स के साथ), अपारदर्शिता, परिवर्तन और सम्मिलित) जैसे गुण एक फ़ोल्डर की तरह कार्य करते हैं। यह फ़ोल्डर एक तत्व और उसके सभी बच्चों को लेता है, उन्हें मुख्य स्टैक से निकालता है, और उन्हें एक अलग उप-स्टैक में समूहित करता है, जिसे हम स्टैकिंग संदर्भ कहते हैं। स्थित तत्वों के लिए, ऐसा तब होता है जब हम ऑटो के अलावा कोई z-इंडेक्स मान घोषित करते हैं। अपारदर्शिता, परिवर्तन और फ़िल्टर जैसी संपत्तियों के लिए, विशिष्ट मान लागू होने पर स्टैकिंग संदर्भ स्वचालित रूप से बनाया जाता है।
इसे समझने की कोशिश करें: एक बार जब कागज का एक टुकड़ा (यानी, एक बच्चा तत्व) एक फ़ोल्डर के अंदर होता है (यानी, माता-पिता का स्टैकिंग संदर्भ), तो यह कभी भी उस फ़ोल्डर से बाहर नहीं निकल सकता है या किसी अलग फ़ोल्डर में कागजात के बीच नहीं रखा जा सकता है। इसका z-इंडेक्स अब केवल अपने फ़ोल्डर के अंदर ही प्रासंगिक है।
नीचे दिए गए उदाहरण में, पेपर बी अब फ़ोल्डर बी के स्टैकिंग संदर्भ में है, और केवल फ़ोल्डर में अन्य कागजात के साथ ही ऑर्डर किया जा सकता है।
कल्पना करें, यदि आप चाहें, तो आपके डेस्क पर दो फ़ोल्डर हैं:
.फ़ोल्डर-ए { जेड-इंडेक्स: 1; } .फ़ोल्डर-बी { जेड-इंडेक्स: 2; }
आइए मार्कअप को थोड़ा अपडेट करें। फ़ोल्डर A के अंदर एक विशेष पृष्ठ है, z-index: 9999. फ़ोल्डर B के अंदर एक सादा पृष्ठ है, z-index: 5.
.विशेष-पृष्ठ { z-सूचकांक: 9999; } .सादा पृष्ठ { z-सूचकांक: 5; }
कौन सा पेज शीर्ष पर है? यह फ़ोल्डर B में .plain-पेज है। ब्राउज़र चाइल्ड पेपर्स को अनदेखा करता है और पहले दो फ़ोल्डरों को स्टैक करता है। यह फ़ोल्डर B (z-index: 2) को देखता है और इसे फ़ोल्डर A (z-index: 1) के शीर्ष पर रखता है क्योंकि हम जानते हैं कि दो एक से बड़ा है। इस बीच, .special-page को z-index: 9999 पेज पर सेट किया गया है, जो स्टैक के निचले भाग पर है, भले ही इसका z-index उच्चतम संभव मान पर सेट है। स्टैकिंग संदर्भों को भी नेस्ट किया जा सकता है (फ़ोल्डरों के अंदर फ़ोल्डर्स), जिससे एक "फैमिली ट्री" बनता है। यही सिद्धांत लागू होता है: एक बच्चा कभी भी अपने माता-पिता के फ़ोल्डर से बाहर नहीं निकल सकता। अब जब आप समझ गए हैं कि स्टैकिंग संदर्भ उन फ़ोल्डरों की तरह कैसे व्यवहार करते हैं जो परतों को समूहित और पुन: व्यवस्थित करते हैं, तो यह पूछने लायक है: कुछ गुण - जैसे परिवर्तन और अस्पष्टता - नए स्टैकिंग संदर्भ क्यों बनाते हैं? बात यह है: ये गुण दिखने के कारण स्टैकिंग संदर्भ नहीं बनाते हैं; वे ऐसा इसलिए करते हैं क्योंकि ब्राउज़र हुड के नीचे कैसे काम करता है। जब आप ट्रांसफ़ॉर्म, अपारदर्शिता, फ़िल्टर या परिप्रेक्ष्य लागू करते हैं, तो आप ब्राउज़र को बता रहे हैं, "अरे, यह तत्व हिल सकता है, घूम सकता है या फीका पड़ सकता है, इसलिए तैयार रहें!"
जब आप इन गुणों का उपयोग करते हैं, तो ब्राउज़र रेंडरिंग को अधिक कुशलता से प्रबंधित करने के लिए एक नया स्टैकिंग संदर्भ बनाता है। यह ब्राउज़र को एनिमेशन, ट्रांसफ़ॉर्म और दृश्य प्रभावों को स्वतंत्र रूप से संभालने की अनुमति देता है, जिससे यह पुनर्गणना करने की आवश्यकता कम हो जाती है कि ये तत्व शेष पृष्ठ के साथ कैसे इंटरैक्ट करते हैं। इसे ऐसे समझें जैसे कि ब्राउज़र कह रहा है, "मैं इस फ़ोल्डर को अलग से संभालूंगा ताकि मुझे हर बार इसके अंदर कुछ भी बदलने पर पूरे डेस्क में फेरबदल न करना पड़े।" लेकिन यहां हैएक दुष्प्रभाव. एक बार जब ब्राउज़र किसी तत्व को अपनी परत में ले लेता है, तो उसे एक नया स्टैकिंग संदर्भ बनाते हुए, उसके भीतर सब कुछ "समतल" करना होगा। यह डेस्क से एक फ़ोल्डर हटाकर उसे अलग से संभालने जैसा है; उस फ़ोल्डर के अंदर सब कुछ समूहीकृत हो जाता है, और ब्राउज़र अब यह तय करते समय इसे एक इकाई के रूप में मानता है कि किसके ऊपर क्या बैठता है। इसलिए भले ही परिवर्तन और अपारदर्शिता गुण तत्वों को दृष्टिगत रूप से व्यवस्थित करने के तरीके को प्रभावित नहीं करते हों, वे ऐसा करते हैं, और यह प्रदर्शन अनुकूलन के लिए है। कई अन्य सीएसएस गुण भी समान कारणों से स्टैकिंग संदर्भ बना सकते हैं। यदि आप गहराई से जानना चाहते हैं तो एमडीएन एक पूरी सूची प्रदान करता है। ऐसे बहुत से हैं, जो केवल यह दर्शाते हैं कि बिना जाने अनजाने में स्टैकिंग संदर्भ बनाना कितना आसान है। "अनस्टैकिंग" समस्या स्टैकिंग संबंधी समस्याएं कई कारणों से उत्पन्न हो सकती हैं, लेकिन कुछ अन्य की तुलना में अधिक सामान्य हैं। मोडल घटक एक क्लासिक पैटर्न हैं क्योंकि उन्हें अन्य सभी तत्वों के ऊपर एक शीर्ष परत पर घटक को "खोलने" के लिए टॉगल करने की आवश्यकता होती है, फिर इसे "बंद" होने पर शीर्ष परत से हटा दिया जाता है। मुझे पूरा विश्वास है कि हम सभी ऐसी स्थिति में आ गए हैं जहां हम एक मोडल खोलते हैं और, किसी भी कारण से, यह प्रकट नहीं होता है। ऐसा नहीं है कि यह ठीक से नहीं खुला, बल्कि स्टैकिंग संदर्भ की निचली परत में यह दृश्य से बाहर है। यह आपको आश्चर्यचकित करता है कि "कैसे?" चूँकि आपने सेट किया है:
.ओवरले { स्थिति: निश्चित; /* स्टैकिंग संदर्भ बनाता है */ z-सूचकांक: 1; /* तत्व को बाकी सभी चीज़ों के ऊपर एक परत पर रखता है */ इनसेट: 0; चौड़ाई: 100%; ऊंचाई: 100vh; ओवर फलो हिडेन; पृष्ठभूमि-रंग: #00000080; }
यह सही लगता है, लेकिन यदि मोडल ट्रिगर वाला मूल तत्व किसी अन्य मूल तत्व के भीतर एक चाइल्ड तत्व है जो z-index: 1 पर भी सेट है, तो यह तकनीकी रूप से मोडल को मुख्य फ़ोल्डर द्वारा अस्पष्ट उपलेयर में रखता है। आइए उस विशिष्ट परिदृश्य और कुछ अन्य सामान्य स्टैकिंग-संदर्भ संबंधी कमियों पर नजर डालें। मुझे लगता है कि आप न केवल यह देखेंगे कि अनजाने में स्टैकिंग संदर्भ बनाना कितना आसान है, बल्कि यह भी कि उन्हें कैसे कुप्रबंधित किया जाए। साथ ही, आप एक प्रबंधित स्थिति में कैसे लौटते हैं यह स्थिति पर निर्भर करता है। परिदृश्य 1: ट्रैप्ड मॉडल
आप तुरंत अपने मोडल को निम्न-स्तरीय परत में फंसा हुआ देख सकते हैं और माता-पिता की पहचान कर सकते हैं। ब्राउज़र एक्सटेंशन स्मार्ट डेवलपर्स ने मदद के लिए एक्सटेंशन बनाए हैं। इस "सीएसएस स्टैकिंग कॉन्टेक्स्ट इंस्पेक्टर" क्रोम एक्सटेंशन जैसे टूल आपको स्टैकिंग संदर्भ बनाने वाले तत्वों के बारे में जानकारी दिखाने के लिए आपके DevTools में एक अतिरिक्त z-इंडेक्स टैब जोड़ते हैं।
आईडीई एक्सटेंशन आप वीएस कोड के लिए इस तरह के एक्सटेंशन के साथ विकास के दौरान मुद्दों को भी देख सकते हैं, जो सीधे आपके संपादक में संभावित स्टैकिंग संदर्भ मुद्दों को उजागर करता है।
स्टैक खोलना और नियंत्रण पुनः प्राप्त करना मूल कारण की पहचान करने के बाद, अगला कदम इससे निपटना है। इस समस्या से निपटने के लिए आप कई तरीके अपना सकते हैं और मैं उन्हें क्रम से सूचीबद्ध करूंगा। हालाँकि, आप किसी भी स्तर पर किसी को भी चुन सकते हैं; कोई भी दूसरे की शिकायत या बाधा नहीं डाल सकता। HTML संरचना बदलें इसे सर्वोत्तम समाधान माना जाता है. स्टैकिंग संदर्भ समस्या से निपटने के लिए, आपको अपने HTML में कुछ तत्वों को अजीब स्थिति में रखना होगा। पृष्ठ का पुनर्गठन आपको DOM को दोबारा आकार देने और स्टैकिंग संदर्भ समस्या को खत्म करने में मदद करेगा। समस्याग्रस्त तत्व ढूंढें और उसे HTML मार्कअप में ट्रैपिंग तत्व से हटा दें। उदाहरण के लिए, हम .modal-कंटेनर को हेडर से बाहर ले जाकर
तत्व में रखकर पहले परिदृश्य, "द ट्रैप्ड मॉडल" को हल कर सकते हैं।<हेडर क्लास='हेडर'>
हेडर
<बटन आईडी='ओपन-मोडल'>ओपन मोडल <मुख्य वर्ग='सामग्री'>मुख्य सामग्री
इस सामग्री का z-सूचकांक 2 है और फिर भी यह मोडल को कवर नहीं करेगा।
मॉडल शीर्षक
अब, मैं किसी भी चीज़ से पीछे नहीं हूं। DOM पुनर्गठन के परिणामस्वरूप मुझे बेहतर स्थिति प्राप्त हुई है।
<बटन आईडी='क्लोज-मोडल'>बंद करेंजब आप "ओपन मॉडल" बटन पर क्लिक करते हैं, तो मोडल बाकी सभी चीजों के सामने स्थित हो जाता है जैसा कि उसे होना चाहिए। शोयम्बो गेब्रियल आयोमाइड द्वारा पेन परिदृश्य 1: द ट्रैप्ड मोडल (समाधान) [फोर्क्ड] देखें। समायोजितसीएसएस में पेरेंट स्टैकिंग संदर्भ क्या होगा यदि तत्व ऐसा है जिसे आप लेआउट को तोड़े बिना स्थानांतरित नहीं कर सकते? समस्या का समाधान करना बेहतर है: माता-पिता संदर्भ स्थापित करते हैं। संदर्भ को ट्रिगर करने के लिए जिम्मेदार सीएसएस संपत्ति (या गुण) ढूंढें और इसे हटा दें। यदि इसका कोई उद्देश्य है और इसे हटाया नहीं जा सकता है, तो पूरे कंटेनर को उठाने के लिए मूल तत्व को उसके सहोदर तत्वों की तुलना में अधिक z-सूचकांक मान दें। उच्च z-सूचकांक मान के साथ, मूल कंटेनर शीर्ष पर चला जाता है, और उसके बच्चे उपयोगकर्ता के करीब दिखाई देते हैं। "द सबमर्ज्ड ड्रॉपडाउन" परिदृश्य में हमने जो सीखा उसके आधार पर, हम ड्रॉपडाउन को नेवबार से बाहर नहीं ले जा सकते हैं; इसका कोई मतलब नहीं होगा. हालाँकि, हम .navbar कंटेनर के z-index मान को .content तत्व के z-index मान से अधिक बढ़ा सकते हैं। .नावबार { पृष्ठभूमि: #333; /* z-सूचकांक: 1; */ z-सूचकांक: 3; स्थिति: सापेक्ष; }
इस परिवर्तन के साथ, .ड्रॉपडाउन-मेनू अब बिना किसी समस्या के सामग्री के सामने दिखाई देता है। शोयम्बो गेब्रियल अयोमाइड द्वारा पेन परिदृश्य 2: जलमग्न ड्रॉपडाउन (समाधान) [फोर्क्ड] देखें। यदि फ्रेमवर्क का उपयोग कर रहे हैं तो पोर्टल आज़माएं रिएक्ट या Vue जैसे फ्रेमवर्क में, पोर्टल एक ऐसी सुविधा है जो आपको DOM में एक घटक को उसके सामान्य पैरेंट पदानुक्रम के बाहर प्रस्तुत करने की सुविधा देती है। पोर्टल आपके घटकों के लिए टेलीपोर्टेशन डिवाइस की तरह हैं। वे आपको किसी घटक के HTML को दस्तावेज़ में कहीं भी प्रस्तुत करने देते हैं (आमतौर पर सीधे दस्तावेज़.बॉडी में) जबकि इसे प्रॉप्स, स्थिति और घटनाओं के लिए उसके मूल मूल से तार्किक रूप से कनेक्ट रखते हैं। यह स्टैकिंग संदर्भ जाल से बचने के लिए एकदम सही है क्योंकि प्रस्तुत आउटपुट वस्तुतः समस्याग्रस्त मूल कंटेनर के बाहर दिखाई देता है। ReactDOM.createPortal( <टूलटिप />, दस्तावेज़.शरीर );
यह सुनिश्चित करता है कि आपकी ड्रॉपडाउन सामग्री उसके पैरेंट के पीछे छिपी नहीं है, भले ही पैरेंट में ओवरफ़्लो: छिपा हुआ या कम z-इंडेक्स हो। "क्लिप्ड टूलटिप" परिदृश्य में जिसे हमने पहले देखा था, मैंने टूलटिप को ओवरफ़्लो से बचाने के लिए एक पोर्टल का उपयोग किया था: दस्तावेज़ के मुख्य भाग में छिपा हुआ क्लिप रखकर और इसे कंटेनर के भीतर ट्रिगर के ऊपर स्थित करके। श्योम्बो गेब्रियल आयोमाइड द्वारा पेन परिदृश्य 3: द क्लिप्ड टूलटिप (समाधान) [फोर्क्ड] देखें। साइड इफेक्ट के बिना स्टैकिंग संदर्भ का परिचय पिछले अनुभाग में बताए गए सभी दृष्टिकोण समस्याग्रस्त स्टैकिंग संदर्भों से तत्वों को "अनस्टैकिंग" करने के उद्देश्य से हैं, लेकिन कुछ स्थितियां ऐसी हैं जहां आपको वास्तव में स्टैकिंग संदर्भ बनाने की आवश्यकता होगी या बनाना चाहेंगे। एक नया स्टैकिंग संदर्भ बनाना आसान है, लेकिन सभी दृष्टिकोण दुष्प्रभाव के साथ आते हैं। यानी, आइसोलेशन का उपयोग करने के अलावा: आइसोलेट। जब किसी तत्व पर लागू किया जाता है, तो उस तत्व के बच्चों का स्टैकिंग संदर्भ प्रत्येक बच्चे के सापेक्ष और उस संदर्भ के भीतर निर्धारित होता है, बजाय इसके बाहर के तत्वों से प्रभावित होने के। एक क्लासिक उदाहरण उस तत्व को एक नकारात्मक मान निर्दिष्ट करना है, जैसे कि z-index: -1। कल्पना कीजिए कि आपके पास एक .कार्ड घटक है। आप एक सजावटी आकृति जोड़ना चाहते हैं जो .कार्ड के टेक्स्ट के पीछे, लेकिन कार्ड की पृष्ठभूमि के शीर्ष पर हो। कार्ड पर स्टैकिंग संदर्भ के बिना, z-index: -1 आकार को रूट स्टैकिंग संदर्भ (पूरे पृष्ठ) के नीचे भेजता है। इससे यह .कार्ड की सफेद पृष्ठभूमि के पीछे गायब हो जाता है: शोयम्बो गेब्रियल अयोमाइड द्वारा पेन नेगेटिव जेड-इंडेक्स (समस्या) [फोर्क्ड] देखें। इसे हल करने के लिए, हम पैरेंट .कार्ड पर आइसोलेशन: आइसोलेट घोषित करते हैं: शोयम्बो गेब्रियल अयोमाइड द्वारा पेन नेगेटिव जेड-इंडेक्स (समाधान) [फोर्क्ड] देखें। अब, .कार्ड तत्व स्वयं एक स्टैकिंग संदर्भ बन जाता है। जब इसके चाइल्ड एलिमेंट - छद्म तत्व से पहले :पर बनाई गई सजावटी आकृति - में z-index: -1 होता है, तो यह पैरेंट के स्टैकिंग संदर्भ के बहुत नीचे तक जाता है। जैसा कि इरादा था, यह टेक्स्ट के पीछे और कार्ड की पृष्ठभूमि के शीर्ष पर बिल्कुल बैठता है। निष्कर्ष याद रखें: अगली बार जब आपका z-इंडेक्स नियंत्रण से बाहर हो जाए, तो यह एक फंसा हुआ स्टैकिंग संदर्भ है। सन्दर्भ
स्टैकिंग संदर्भ (एमडीएन) Z-सूचकांक और स्टैकिंग संदर्भ (web.dev) "सीएसएस में अलगाव संपत्ति के साथ एक नया स्टैकिंग संदर्भ कैसे बनाएं", नेटली पिना "व्हाट द हेक, ज़ेड-इंडेक्स??", जोश कोमू
स्मैशिंगमैग पर आगे पढ़ें
"बड़ी परियोजनाओं में सीएसएस जेड-इंडेक्स का प्रबंधन", स्टीवन फ़्रीसन "स्टिकी हेडर और पूर्ण-ऊंचाई वाले तत्व: एक मुश्किल संयोजन", फिलिप ब्राउनेन "एक घटक-आधारित वेब एप्लिकेशन में जेड-इंडेक्स का प्रबंधन", पावेल पोमेरेन्त्सेव "द जेड-इंडेक्स सीएसएस प्रॉपर्टी: ए कॉम्प्रिहेंसिव लुक", लुई लाज़ारिस
