की अहाँ कहियो अपन CSS मे कोनो तत्व पर z-index: 99999 सेट केने छी, आ ओ अन्य तत्वक ऊपर नहि निकलैत अछि? एतेक पैघ मान केँ ओहि तत्व केँ दृष्टिगत रूप सँ कोनो आन वस्तुक ऊपर आसानी सँ राखबाक चाही, ई मानैत जे सभ अलग-अलग तत्व या त' कम मान पर सेट कएल गेल अछि वा एकदम सेट नहि कएल गेल अछि । वेबपेज क॑ आमतौर प॑ द्वि-आयामी स्पेस म॑ दर्शायलऽ जाय छै; तथापि, विशिष्ट सीएसएस गुण लागू करला स॑ गहराई केरऽ संप्रेषण लेली एगो काल्पनिक z-अक्ष विमान केरऽ परिचय देलऽ जाय छै । ई विमान स्क्रीन के लंबवत होय छै, आरू ओकरा स॑ उपयोगकर्ता तत्वऽ के क्रम के बोध करै छै, एक के ऊपर दोसरऽ । काल्पनिक z-अक्ष, उपयोगकर्ता केरऽ स्टैक तत्वऽ के धारणा के पाछू के विचार ई छै कि एकरा बनाबै वाला CSS गुण मिल क॑ ओकरा बनाबै छै जेकरा हमनी स्टैकिंग संदर्भ कहै छियै । हम एहि बात पर गप्प करब जे कोनो वेबपेज पर तत्व के कोना “स्टैक” कयल जाइत अछि, स्टैकिंग क्रम के की नियंत्रित करैत अछि, आ जरूरत पड़ला पर तत्व के “अनस्टैक” करबाक व्यावहारिक दृष्टिकोण. संदर्भ ढेर के बारे में अपन वेबपेज के डेस्क के रूप में कल्पना करू। जेना-जेना अहाँ एचटीएमएल तत्व जोड़ैत छी, अहाँ कागजक टुकड़ा, एक के बाद एक, डेस्क पर बिछा रहल छी. अंतिम कागज केरऽ टुकड़ा जे सबसें हाल म॑ जोड़लऽ गेलऽ एचटीएमएल तत्व के बराबर होय छै, आरू ई ओकरा स॑ पहल॑ रखलऽ गेलऽ अन्य सब कागज के ऊपर बैठै छै । ई सामान्य दस्तावेज प्रवाह अछि, ओहो नेस्टेड तत्वक लेल. डेस्क स्वयं रूट स्टैकिंग संदर्भ क॑ दर्शाबै छै, जे तत्व द्वारा बनलऽ छै, जेकरा म॑ अन्य सब फोल्डर शामिल छै । आब, विशिष्ट CSS गुण काज मे आबि जाइत अछि । स्थिति (z-index के साथ), अपारदर्शिता, ट्रांसफॉर्म, आरू कंटेंट जैसनऽ गुण फोल्डर के तरह काम करै छै. ई फोल्डर कोनों तत्व आरू ओकरऽ सब बच्चा क॑ ल॑ क॑ मुख्य स्टैक स॑ निकाली क॑ ओकरा अलग सब-स्टैक म॑ समूहबद्ध करी क॑ ओकरा बनाबै छै जेकरा हम्मं॑ स्टैकिंग संदर्भ कहै छियै । पोजीशनल एलिमेंट के लेल, ई तखन होइत अछि जखन हम ऑटो के अलावा कोनो z-इंडैक्स मान घोषित करैत छी. अपारदर्शिता, रूपांतरण, आरू फिल्टर जैसनऽ गुणऽ के लेलऽ, स्टैकिंग संदर्भ स्वचालित रूप स॑ बनैलऽ जाय छै जब॑ विशिष्ट मान लागू करलऽ जाय छै.
एकरा समझय कें कोशिश करूं: एक बेर कोनों कागज कें टुकड़ा (अर्थात, कोनों चाइल्ड तत्व) कोनों फोल्डर कें अंदर (अर्थात, माता-पिता कें स्टैकिंग संदर्भ) भ गेलाक कें बाद, ओ कहियो ओय फोल्डर सं बाहर नहि निकल सकय छै या कोनों अलग फोल्डर मे कागज कें बीच नहि राखल जा सकय छै. एकर जेड-सूचकांक आब मात्र अपन फोल्डरक भीतर प्रासंगिक अछि ।
नीचा देल गेल चित्र मे, पेपर बी आब फोल्डर बी कें स्टैकिंग संदर्भ कें भीतर छै, आ केवल फोल्डर मे अन्य पेपरक कें साथ ऑर्डर कैल जा सकय छै.
कल्पना करू, जँ अहाँ चाहब, जे अहाँक डेस्क पर दू टा फोल्डर अछि:
.फोल्डर-एक { z-सूचकांक: 1; } . .फोल्डर-बी { जेड-सूचकांक: 2; } .
मार्कअप कनि अपडेट क’ दियौक। फोल्डर A के अंदर एक विशेष पृष्ठ, z-सूचकांक: 9999. फोल्डर B के अंदर एक सादा पृष्ठ, z-सूचकांक: 5.
.विशेष-पृष्ठ { z-सूचकांक: 9999; } . .सादा-पृष्ठ { z-सूचकांक: 5; } .
कोन पेज ऊपर अछि ? ई फोल्डर बी मे .प्लेन-पेज अछि.ब्राउजर चाइल्ड पेपर केँ अनदेखी करैत अछि आ पहिने दुनू फोल्डर केँ ढेर क’ दैत अछि. ई फोल्डर बी (z-index: 2) देखै छै आरू ओकरा फोल्डर ए (z-index: 1) के ऊपर रखै छै, कैन्हेंकि हमरा सब क॑ पता छै कि दू एक स॑ बड़ऽ छै । एम्हर, z-index: 9999 पर सेट कएल गेल .special-page पृष्ठ स्टैक क निचला भाग मे अछि भले ओकर z-index उच्चतम संभव मान पर सेट कएल गेल अछि. स्टैकिंग संदर्भ कें नेस्ट (फोल्डर कें अंदर फोल्डर) सेहो कैल जा सकय छै, जे एकटा “परिवारक वृक्ष” बनायत छै. इहे सिद्धांत लागू होयत छै: बच्चा अपन माता-पिता कें फोल्डर सं कहियो नहि बचि सकय छै. आब जखन अहाँ केँ पता चलत जे स्टैकिंग संदर्भ कोना फोल्डर जकाँ व्यवहार करैत अछि जे परत केँ समूहबद्ध आ पुनः क्रमबद्ध करैत अछि, तखन ई पूछब उचित अछि: किछु गुण — जेना ट्रांसफॉर्म आ अपारदर्शिता — नव स्टैकिंग संदर्भ किएक बनबैत अछि ? एत’ बात ई जे ई गुण सभ केहन लगैत अछि ताहि कारणेँ स्टैकिंग संदर्भ नहि बनबैत अछि; ओ सभ एहि लेल करैत छथि जे ब्राउजर हुडक नीचाँ कोना काज करैत अछि । जखन अहाँ ट्रांसफॉर्म, अपारदर्शिता, फिल्टर, वा परिप्रेक्ष्य लागू करैत छी त’ अहाँ ब्राउजर केँ कहि रहल छी, “अरे, ई तत्व हिल सकैत अछि, घुमि सकैत अछि, वा फीका भ’ सकैत अछि, तेँ तैयार रहू!”
जखन अहां इ गुणक कें उपयोग करय छी, तखन ब्राउज़र रेंडरिंग कें बेसि कुशलता सं प्रबंधित करय कें लेल एकटा नव स्टैकिंग संदर्भ बनायत छै. ई ब्राउज़र क॑ एनीमेशन, ट्रांसफॉर्म, आरू विजुअल इफेक्ट क॑ स्वतंत्र रूप स॑ संभाल॑ के अनुमति दै छै, जेकरा स॑ ई पुनः गणना करै के जरूरत कम होय जाय छै कि ई तत्व सब पन्ना के बाकी हिस्सा के साथ कोना बातचीत करै छै । एकरा ब्राउजर के कहब जेना सोचू, “हम एहि फोल्डर के अलग स’ संभालब जाहि स’ हर बेर जखन एकर भीतर किछु बदलत त’ पूरा डेस्क मे फेरबदल नहि करय पड़य.” मुदा त’ अछिएएकटा दुष्प्रभाव। एक बेर ब्राउज़र कोनों तत्व क॑ अपनऽ परत म॑ उठाबै के बाद ओकरा ओकरऽ भीतर के सब कुछ क॑ “चपटा” करना छै, जेकरा स॑ एगो नया स्टैकिंग संदर्भ बनैलऽ जाय छै । ई त’ ओहिना अछि जेना कोनो फोल्डर कें डेस्क पर सं उतारि क’ ओकरा अलग सं संभालि लेब; ओहि फोल्डर के भीतर के सब किछु समूहबद्ध भ जाइत अछि, आओर ब्राउजर आब एकरा एकटा इकाई के रूप में मानैत अछि जखन ई निर्णय लैत अछि जे की की ऊपर बैसैत अछि. अतः भले ही ट्रांसफॉर्म आरू अपारदर्शिता गुण तत्वऽ के दृश्य रूप स॑ ढेर होय के तरीका क॑ प्रभावित नै करै वाला प्रतीत होय सकै छै, लेकिन वू होय छै, आरू ई प्रदर्शन अनुकूलन लेली छै । कई अन्य CSS गुण सेहो समान कारण सं स्टैकिंग संदर्भ बना सकय छै. अगर अहां गहराई सं खोदय चाहय छी तं एमडीएन पूरा सूची उपलब्ध कराबैत अछि. काफी किछु अछि, जे मात्र ई दर्शाबैत अछि जे बिना जनने अनजाने मे स्टैकिंग संदर्भ बनेनाइ कतेक आसान अछि । “अनस्टैकिंग” समस्या स्टैकिंग के मुद्दा बहुत कारण सं उठि सकैत अछि, मुदा किछ दोसर सं बेसि आम अछि. मोडल घटक एकटा क्लासिक पैटर्न छै, कियाकि ओकरा मे घटक कें अन्य सब तत्वक कें ऊपर एकटा ऊपरी परत पर “खुल” कें लेल टॉगल करय कें आवश्यकता होयत छै, तखन ओकरा ऊपरी परत सं हटावय कें जरूरत छै जखन ओ “बंद” भ जायत छै. हमरा पूरा विश्वास अछि जे हम सब एहन स्थिति मे पड़ि गेल छी जे हम सब एकटा मोडल खोलैत छी आ, जे किछु कारण स’, से नहि देखाइत अछि. एहन बात नहि जे ई ठीक स’ नहि खुजल, बल्कि स्टैकिंग संदर्भक निचला परत मे ई नजरि स’ बाहर अछि. एहि सँ अहाँ सोचय पड़ैत अछि जे “कोना भ’ गेल?” चूंकि अहाँ सेट क' रहल छी:
.ओवरले { . स्थिति: निश्चित; /* स्टैकिंग संदर्भ बनाता है */ जेड-सूचकांक: 1; /* तत्व के बाकी सब चीज के ऊपर एकटा लेयर पर राखैत अछि */ इनसेट: 0; चौड़ाई: 100%; ऊंचाई: 100vh; ओवरफ्लो: छिपल; पृष्ठभूमि-रंग: # 00000080; } .
ई सही लगै छै, लेकिन अगर मोडल ट्रिगर वाला पैरेंट तत्व कोनों अन्य पैरेंट तत्व के भीतर एकटा चाइल्ड तत्व छै जे z-इंडैक्स पर भी सेट छै: 1, जे तकनीकी रूप सं मोडल कें मुख्य फोल्डर द्ववारा अस्पष्ट एकटा सबलेयर मे रखयत छै. ओहि विशिष्ट परिदृश्य आ एक दू टा आओर आम स्टैकिंग-संदर्भक जाल देखल जाय. हमरा लगैत अछि जे अहाँ देखब जे अनजाने मे स्टैकिंग संदर्भ बनेनाइ कतेक आसान अछि, संगहि एकर गलत प्रबंधन सेहो करब. संगहि, अहां कोना प्रबंधित अवस्था मे वापसी करब, इ स्थिति पर निर्भर करैत अछि। परिदृश्य 1: फंसल मोडल
अहां तुरंत अपन मोडल कें निम्न स्तर कें परत मे फंसल देख सकय छी आ अभिभावक कें पहचान कयर सकय छी. ब्राउज़र एक्सटेंशन स्मार्ट डेवलपर मदद करय लेल एक्सटेंशन बनौने छथिन्ह. अइ तरह कें टूल “CSS Stacking Context Inspector” क्रोम एक्सटेंशन अहां कें DevTools मे एकटा अतिरिक्त z-index टैब जोड़यत छै, जे अहां कें ओ तत्वक कें बारे मे जानकारी देखायत छै जे स्टैकिंग संदर्भ बनायत छै.
आईडीई एक्सटेंशन एतय तक कि अहां वीएस कोड कें लेल अइ तरह कें एक्सटेंशन कें साथ विकास कें दौरान मुद्दा कें स्पॉट कयर सकय छी, जे संभावित स्टैकिंग संदर्भ मुद्दा कें सीधा अहां कें संपादक मे उजागर करय छै.
अनस्टैकिंग आ रिगेनिंग कंट्रोल हम सब मूल कारण के पहचान केलाक बाद अगिला कदम अछि एहि स’ निपटब. एहि समस्या स’ निपटबाक लेल अहाँ कतेको तरीका अपना सकैत छी, आ हम ओकरा क्रम मे सूचीबद्ध करब. अहाँ कोनो स्तर पर ककरो चुनि सकैत छी, तथापि; कियो दोसर के शिकायत या बाधा नहि द सकैत अछि। एचटीएमएल संरचना बदलू एकरा इष्टतम फिक्स मानल जाइत अछि। अहाँ के स्टैकिंग संदर्भ मुद्दा में दौड़य लेल, अहाँ अपन एचटीएमएल के भीतर किछु तत्व के मजेदार स्थिति में राखने होयब. पृष्ठ के पुनर्गठन करला स॑ आपक॑ DOM क॑ नया रूप दै म॑ मदद मिलतै आरू स्टैकिंग संदर्भ समस्या क॑ समाप्त करलऽ जैतै । समस्याग्रस्त तत्व खोजू आ एचटीएमएल मार्कअप मे ट्रैपिंग तत्व सँ हटाउ. उदाहरण के लेल, हम पहिल परिदृश्य, “The Trapped Modal” के हल क सकैत छी .modal-container के हेडर स बाहर ल क ओकरा अपने आप
तत्व में राखि क ।<शीर्षक वर्ग="शीर्षक">
शीर्षक
के अछि <मुख्य वर्ग="सामग्री">मुख्य सामग्री
ई सामग्रीक z-सूचकांक 2 अछि आओर एखनो मोडल केँ कवर नहि करत.
क
मोडल शीर्षक
आब, हम कोनो बातक पाछू नहि छी। डीओएम पुनर्गठन के परिणामस्वरूप हमरा नीक स्थिति भेटल अछि।
जखन अहाँ “Open Modal” बटन पर क्लिक करब त’ मोडल बाकी सब किछु के सामने ओहिना ठाढ़ भ’ जाइत अछि जेना हेबाक चाही. देखू पेन परिदृश्य 1: द फंसल मोडल (समाधान) [कांटा] शोयोम्बो गैब्रियल अयोमाइड द्वारा। एडजस्ट दCSS में माता-पिता स्टैकिंग संदर्भ जँ तत्व एहन हो जे बिना लेआउट तोड़ने नहि हिला सकब त’ की हेतै? एहि मुद्दा केँ संबोधित करब नीक रहत: अभिभावक संदर्भ स्थापित करैत छथि. संदर्भ कें ट्रिगर करय कें लेल जिम्मेदार CSS गुण (या गुण) कें खोजू आ ओकरा हटाउ. यदि एकर कोनों उद्देश्य छै आ ओकरा हटाएल नहि जा सकय छै, त माता-पिता कें ओकर भाई-बहिन तत्वक सं बेसि z-सूचकांक मान दिअ जे पूरा कंटेनर कें उठा सकय. एकटा उच्च z-सूचकांक मान कें साथ, माता-पिता कंटेनर ऊपर चलि जायत छै, आ ओकर बच्चा उपयोगकर्ता कें करीब दिखाई दैत छै. “द सबमर्जड ड्रॉपडाउन” परिदृश्य में जे किछु सीखलहुं ओकर आधार पर, हम ड्रॉपडाउन कें नेवबार सं बाहर नहिं ल’ सकैत छी ; एकर कोनो मतलब नहि होइत। लेकिन, हम .navbar कंटेनर केरऽ z-index मान क॑ बढ़ा सकै छियै ताकि .content तत्व केरऽ z-index मान स॑ अधिक होय सक॑ । .नवबार { पृष्ठभूमि: # 333; /* जेड-सूचकांक: 1; */ जेड-सूचकांक: 3; स्थिति: सापेक्षिक; } .
एहि परिवर्तनक संग आब .ड्रॉपडाउन-मेनू बिना कोनो मुद्दा के सामग्री के सामने आबि जायत. देखू पेन परिदृश्य 2: द डूबल ड्रॉपडाउन (समाधान) [कांटा] शोयोम्बो गैब्रियल अयोमाइड द्वारा। पोर्टल के कोशिश करू, यदि कोनो ढाँचा के उपयोग क रहल छी React या Vue जैना फ्रेमवर्क मे, पोर्टल एकटा एहन सुविधा छै जे अहां कें DOM मे ओकर सामान्य पैरेंट पदानुक्रम सं बाहर कोनों घटक कें रेंडर करय कें अनुमति देयत छै. पोर्टल अहां कें घटक कें लेल टेलीपोर्टेशन डिवाइस कें तरह छै. ओ अहां कें कोनों घटक कें एचटीएमएल कें दस्तावेज मे कतहु (आम तौर पर ठीक document.body मे) रेंडर करय कें अनुमति देयत छै जखन कि ओकरा प्रोप, राज्य, आ घटनाक कें लेल ओकर मूल माता-पिता सं तार्किक रूप सं जुड़ल रखयत छै. इ स्टैकिंग संदर्भ जाल सं बचय कें लेल एकदम सही छै कियाकि रेंडर आउटपुट शाब्दिक रूप सं समस्याग्रस्त पैरेंट कंटेनर कें बाहर दिखाई दै छै. ReactDOM.createPortal ( 1999। <टूलटिप />, 1999। दस्तावेज़।शरीर );
एहि सँ ई सुनिश्चित होइत अछि जे अहाँक ड्रॉपडाउन सामग्री ओकर माता-पिताक पाछू नहि नुकायल अछि, भले माता-पिता मे ओवरफ्लो हो: नुकायल वा एकटा निचला z-सूचकांक. “The Clipped Tooltip” परिदृश्य म॑ हम्मं॑ पहल॑ देखलऽ छेलियै, हम्मं॑ टूलटिप क॑ ओवरफ्लो स॑ बचाबै लेली एगो पोर्टल के इस्तेमाल करल॑ छेलियै: ओकरा डॉक्यूमेंट बॉडी म॑ रखी क॑ आरू कंटेनर के भीतर ट्रिगर के ऊपर रखी क॑ छिपलऽ क्लिप । देखू पेन परिदृश्य 3: द क्लिपड टूलटिप (समाधान) [कांटा] शोयोम्बो गैब्रियल अयोमाइड द्वारा। दुष्प्रभाव के बिना स्टैकिंग संदर्भ के परिचय पिछला भाग मे व्याख्या कैल गेल सबटा दृष्टिकोण समस्याग्रस्त स्टैकिंग संदर्भ सं तत्वक कें “अनस्टैकिंग” करय कें उद्देश्य सं छै, मुदा किछ एहन स्थिति छै जतय अहां कें वास्तव मे स्टैकिंग संदर्भ बनावा कें जरूरत होयत या करय कें इच्छा होयत. नया स्टैकिंग संदर्भ बनाना आसान छै, लेकिन सब दृष्टिकोण एक दुष्प्रभाव के साथ आबै छै. अर्थात आइसोलेशन के प्रयोग के छोड़ि क: आइसोलेट। जखन कोनों तत्व पर लागू कैल जायत छै, तखन ओय तत्व कें बच्चाक कें स्टैकिंग संदर्भ प्रत्येक बच्चा कें सापेक्ष आ ओय संदर्भ कें भीतर निर्धारित कैल जायत छै, नहि कि ओकरा सं बाहर कें तत्वक सं प्रभावित होयत छै. एकटा क्लासिक उदाहरण ओय तत्व कें एकटा ऋणात्मक मान असाइन करनाय छै, जेना कि z-सूचकांक: -1. कल्पना करू जे अहाँक पास .कार्ड घटक अछि। अहाँ एकटा सजावटी आकृति जोड़य चाहैत छी जे .कार्ड’क पाठ’क पाछू बैसल हो, मुदा कार्ड’क बैकग्राउंड’क ऊपर. कार्ड पर स्टैकिंग संदर्भ कें बिना, z-सूचकांक: -1 आकृति कें रूट स्टैकिंग संदर्भ (पूरी पन्ना) कें निचला भाग मे भेजय छै. एहि सँ ई .कार्ड’क उज्जर पृष्ठभूमि’क पाछू गायब भ’ जाइत अछि: देखू पेन नकारात्मक z-सूचकांक (समस्या) [कांटा] शोयोम्बो गैब्रियल अयोमाइड द्वारा। एकरा हल करय लेल, हम आइसोलेशन घोषित करैत छी: माता-पिता .card पर आइसोलेट: शोयोम्बो गैब्रियल अयोमाइड द्वारा पेन नकारात्मक z-सूचकांक (समाधान) [कांटा] देखें | आब, .card तत्व स्वयं एकटा स्टैकिंग संदर्भ बनि जाइत अछि । जब॑ एकरऽ चाइल्ड तत्व — :before pseudo-element प॑ बनलऽ सजावटी आकृति — के पास z-index: -1 होय छै, त॑ ई माता-पिता केरऽ स्टैकिंग संदर्भ केरऽ बहुत निचला भाग म॑ जाय छै । ई पाठ के पाछू आ कार्ड के बैकग्राउंड के ऊपर एकदम सही बैसैत अछि, जेना कि इरादा छल. निष्कर्ष मोन राखू: अगिला बेर जखन अहाँक जेड-इंडैक्स बेकाबू बुझाइत अछि, त’ ई एकटा फंसल स्टैकिंग संदर्भ अछि. सन्दर्भ
स्टैकिंग संदर्भ (एमडीएन) 1.1. जेड-सूचकांक आ स्टैकिंग संदर्भ (web.dev) “सीएसएस म॑ आइसोलेशन प्रॉपर्टी के साथ नया स्टैकिंग संदर्भ कैसे बनाबै छै”, नताली पिना “व्हाट द हेक, जेड-इंडैक्स??”, जोश कोमेउ
SmashingMag पर आगू पढ़ब
“बड़का परियोजना मे सीएसएस जेड-इंडैक्स के प्रबंधन”, स्टीवन फ्रीसन | “स्टिकी हेडर आ फुल-हाइट एलिमेंट्स: एकटा ट्रिकी कॉम्बिनेशन”, फिलिप ब्राउनेन “एक घटक-आधारित वेब अनुप्रयोग में जेड-सूचकांक के प्रबंधन”, पावेल पोमेरेंसेव | “द जेड-इंडैक्स सीएसएस संपत्ति: एक व्यापक रूप”, लुई लाजारिस
