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