के तपाईंले कहिल्यै आफ्नो CSS मा एक तत्वमा z-index: 99999 सेट गर्नुभएको छ, र यो अन्य तत्वहरूको शीर्षमा आउँदैन? सबै फरक तत्वहरू या त कम मानमा सेट गरिएका छन् वा सबै सेट नगरिएका छन् भनी मान्दै ठूलो मानले त्यो तत्वलाई सजिलैसँग अरू कुनै पनि चीजको शीर्षमा दृश्यात्मक रूपमा राख्नुपर्दछ। वेबपेज सामान्यतया दुई-आयामी ठाउँमा प्रतिनिधित्व गरिन्छ; यद्यपि, विशिष्ट CSS गुणहरू लागू गरेर, गहिराई बताउनको लागि एक काल्पनिक z-axis प्लेन प्रस्तुत गरिन्छ। यो प्लेन स्क्रिनमा सीधा छ, र यसबाट, प्रयोगकर्ताले तत्वहरूको क्रम बुझ्दछ, एक अर्कोको माथि। काल्पनिक z-axis को पछाडिको विचार, स्ट्याक गरिएका तत्वहरूको प्रयोगकर्ताको धारणा, यो हो कि CSS गुणहरू जसले यसलाई सिर्जना गर्दछ जसलाई हामी स्ट्याकिङ सन्दर्भ भन्छौं। हामी कसरी वेबपेजमा तत्वहरू "स्ट्याक" हुन्छन्, स्ट्याकिङ अर्डरलाई के नियन्त्रण गर्छ, र आवश्यक पर्दा "अनस्ट्याक" तत्वहरूमा व्यावहारिक दृष्टिकोणहरू बारे कुरा गर्न जाँदैछौं। स्ट्याकिङ सन्दर्भहरूको बारेमा तपाईंको वेबपेजलाई डेस्कको रूपमा कल्पना गर्नुहोस्। तपाईंले HTML तत्वहरू थप्दा, तपाईं डेस्कमा एकपछि अर्को कागजका टुक्राहरू राख्दै हुनुहुन्छ। राखिएको कागजको अन्तिम टुक्रा हालै थपिएको HTML तत्वको बराबर छ, र यो अघि राखिएको अन्य सबै कागजातहरूको शीर्षमा बस्छ। यो सामान्य कागजात प्रवाह हो, नेस्टेड तत्वहरूको लागि पनि। डेस्कले नै मूल स्ट्याकिङ सन्दर्भलाई प्रतिनिधित्व गर्दछ, तत्वद्वारा बनाइएको, जसमा अन्य सबै फोल्डरहरू छन्। अब, विशिष्ट CSS गुणहरू खेलमा आउँछन्। स्थिति (z-index संग), अस्पष्टता, रूपान्तरण, र समावेश) जस्ता गुणहरू फोल्डर जस्तै कार्य गर्दछ। यो फोल्डरले एउटा तत्व र यसका सबै बच्चाहरू लिन्छ, तिनीहरूलाई मुख्य स्ट्याकबाट निकाल्छ, र तिनीहरूलाई एउटा छुट्टै उप-स्ट्याकमा समूह बनाउँछ, जसलाई हामी स्ट्याकिङ सन्दर्भ भन्छौं। स्थितिबद्ध तत्वहरूको लागि, यो हुन्छ जब हामीले स्वत: बाहेक अन्य z-सूचकांक मान घोषणा गर्छौं। अस्पष्टता, रूपान्तरण र फिल्टर जस्ता गुणहरूका लागि, विशिष्ट मानहरू लागू हुँदा स्ट्याकिङ सन्दर्भ स्वतः सिर्जना हुन्छ।
यो बुझ्न प्रयास गर्नुहोस्: एक पटक कागजको टुक्रा (अर्थात, बच्चा तत्व) फोल्डर भित्र छ (अर्थात, अभिभावकको स्ट्याकिङ सन्दर्भ), यो त्यो फोल्डरबाट बाहिर निस्कन वा अर्को फोल्डरमा कागजहरू बीचमा राख्न सकिँदैन। यसको z-index अब यसको आफ्नै फोल्डर भित्र मात्र सान्दर्भिक छ।
तलको दृष्टान्तमा, कागज B अब फोल्डर B को स्ट्याकिङ सन्दर्भ भित्र छ, र फोल्डरमा अन्य कागजातहरूसँग मात्र अर्डर गर्न सकिन्छ।
कल्पना गर्नुहोस्, यदि तपाइँ चाहनुहुन्छ भने, तपाइँसँग तपाइँको डेस्कमा दुईवटा फोल्डरहरू छन्:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
मार्कअपलाई अलिकति अपडेट गरौं। इनसाइड फोल्डर ए एक विशेष पृष्ठ हो, z-सूचकांक: 9999। फोल्डर B भित्र एक सादा पृष्ठ हो, z-सूचकांक: 5।
विशेष पृष्ठ { z-सूचकांक: 9999; } .plain-page { z-index: 5; }
कुन पृष्ठ शीर्षमा छ? यो फोल्डर B मा .plain-page हो। ब्राउजरले चाइल्ड पेपरहरूलाई बेवास्ता गर्छ र दुईवटा फोल्डरहरूलाई पहिले स्ट्याक गर्छ। यसले फोल्डर B (z-index: 2) देख्छ र यसलाई फोल्डर A (z-index: 1) को शीर्षमा राख्छ किनभने हामी जान्दछौं कि दुई एक भन्दा ठूलो छ। यसैबीच, .special-page लाई z-index: 9999 मा सेट गरिएको पृष्ठ स्ट्याकको फेदमा छ यद्यपि यसको z-index उच्चतम सम्भावित मानमा सेट गरिएको छ। स्ट्याकिङ सन्दर्भहरू पनि नेस्ट गर्न सकिन्छ (फोल्डरहरू भित्र फोल्डरहरू), "परिवार ट्री" सिर्जना गर्नुहोस्। एउटै सिद्धान्त लागू हुन्छ: बच्चा कहिल्यै आफ्नो आमाबाबुको फोल्डरबाट भाग्न सक्दैन। अब जब तपाईले स्ट्याकिङ सन्दर्भहरू फोल्डरहरू जस्तै व्यवहार गर्ने र तहहरूलाई पुन: क्रमबद्ध गर्ने तरिका थाहा पाउनुभयो, यो सोध्न लायक छ: किन केहि गुणहरू - जस्तै रूपान्तरण र अस्पष्टता - नयाँ स्ट्याकिंग सन्दर्भहरू सिर्जना गर्छन्? यहाँ कुरा छ: यी गुणहरूले स्ट्याकिङ सन्दर्भहरू सिर्जना गर्दैनन् किनभने तिनीहरू कस्तो देखिन्छन्; ब्राउजर हुड अन्तर्गत कसरी काम गर्दछ भनेर तिनीहरूले यो गर्छन्। जब तपाइँ रूपान्तरण, अस्पष्टता, फिल्टर, वा परिप्रेक्ष्य लागू गर्नुहुन्छ, तपाइँ ब्राउजरलाई भन्नुहुन्छ, "हे, यो तत्व सार्न, घुमाउन, वा फीड हुन सक्छ, त्यसैले तयार हुनुहोस्!"
जब तपाइँ यी गुणहरू प्रयोग गर्नुहुन्छ, ब्राउजरले थप कुशलतापूर्वक रेन्डरिङ प्रबन्ध गर्न नयाँ स्ट्याकिङ सन्दर्भ सिर्जना गर्दछ। यसले ब्राउजरलाई एनिमेसनहरू, रूपान्तरणहरू, र दृश्य प्रभावहरू स्वतन्त्र रूपमा ह्यान्डल गर्न अनुमति दिन्छ, यी तत्वहरूले पृष्ठको बाँकी भागसँग कसरी अन्तरक्रिया गर्छन् भनेर पुन: गणना गर्ने आवश्यकतालाई कम गर्दै। यसलाई ब्राउजरको रूपमा सोच्नुहोस्, "म यो फोल्डरलाई अलग-अलग ह्यान्डल गर्नेछु त्यसैले हरेक पटक यो भित्रको केहि परिवर्तन हुँदा मैले सम्पूर्ण डेस्क फेरबदल गर्नुपर्दैन।" तर त्यहाँ छएक साइड इफेक्ट। एकचोटि ब्राउजरले एउटा तत्वलाई आफ्नै तहमा लिन्छ, यसले नयाँ स्ट्याकिङ सन्दर्भ सिर्जना गर्दै, भित्र सबै चीजहरू "फ्लैट" गर्नुपर्छ। यो छुट्टै ह्यान्डल गर्न डेस्कबाट फोल्डर लिनु जस्तै हो; त्यो फोल्डर भित्रका सबै चीजहरू समूहबद्ध हुन्छन्, र ब्राउजरले यसलाई एकल एकाइको रूपमा व्यवहार गर्दछ जब केको शीर्षमा के बस्छ भन्ने निर्णय गर्दा। त्यसोभए पनि रूपान्तरण र अस्पष्टता गुणहरूले तत्वहरूले दृश्य रूपमा स्ट्याक गर्ने तरिकालाई असर गर्न नसक्ने हुन सक्छ, तिनीहरू गर्छन्, र यो प्रदर्शन अनुकूलनको लागि हो। धेरै अन्य CSS गुणहरूले पनि समान कारणहरूको लागि स्ट्याकिङ सन्दर्भहरू सिर्जना गर्न सक्छन्। MDN ले पूर्ण सूची प्रदान गर्दछ यदि तपाईं गहिरो खन्न चाहनुहुन्छ भने। त्यहाँ धेरै थोरै छन्, जसले यो जानी बिना अनजाने स्ट्याकिङ सन्दर्भ सिर्जना गर्न कत्ति सजिलो छ भनेर मात्र चित्रण गर्दछ। "अनस्ट्याकिङ" समस्या स्ट्याकिङ समस्याहरू धेरै कारणहरूका लागि उत्पन्न हुन सक्छ, तर केही अरूहरू भन्दा बढी सामान्य छन्। मोडल कम्पोनेन्टहरू क्लासिक ढाँचा हुन् किनभने उनीहरूलाई अन्य सबै तत्वहरू माथिको माथिल्लो तहमा "खोल्न" कम्पोनेन्टलाई टगल गर्न आवश्यक छ, त्यसपछि यसलाई "बन्द" हुँदा माथिल्लो तहबाट हटाउनुहोस्। म पूर्ण विश्वस्त छु कि हामी सबै यस्तो अवस्थामा पुगेका छौं जहाँ हामी मोडल खोल्छौं र, जुनसुकै कारणले, यो देखा पर्दैन। यो ठीकसँग नखोलिएको होइन, तर स्ट्याकिङ सन्दर्भको तल्लो तहमा यो दृश्य बाहिर छ। यसले तपाईंलाई "कसरी आयो?" तपाईंले सेट गरेदेखि:
ओभरले { स्थिति: स्थिर; /* स्ट्याकिङ सन्दर्भ सिर्जना गर्दछ */ z-सूचकांक: 1; /* लेयरमा सबै कुरा माथि तत्व राख्छ */ इनसेट: 0; चौडाइ: 100%; उचाइ: 100vh; ओभरफ्लो: लुकेको; पृष्ठभूमि रंग: #00000080; }
यो सहि देखिन्छ, तर यदि मोडल ट्रिगर भएको अभिभावक तत्व अर्को अभिभावक तत्व भित्रको बच्चा तत्व हो जुन z-index: 1 मा पनि सेट गरिएको छ, जसले प्राविधिक रूपमा मोडललाई मुख्य फोल्डरद्वारा अस्पष्ट गरिएको सबलेयरमा राख्छ। त्यो विशिष्ट परिदृश्य र अन्य सामान्य स्ट्याकिंग-सन्दर्भ समस्याहरू हेरौं। मलाई लाग्छ कि तपाईंले अनजाने रूपमा स्ट्याकिंग सन्दर्भहरू सिर्जना गर्न कत्तिको सजिलो छ, तर तिनीहरूलाई कसरी दुरुपयोग गर्ने भनेर पनि देख्नुहुनेछ। साथै, तपाईं कसरी व्यवस्थित राज्यमा फर्कनुहुन्छ स्थितिमा निर्भर गर्दछ। परिदृश्य 1: ट्र्याप्ड मोडल
तपाईंले तुरुन्तै तल्लो तहको तहमा फसेको आफ्नो मोडल देख्न सक्नुहुन्छ र अभिभावकलाई चिन्न सक्नुहुन्छ। ब्राउजर विस्तारहरू स्मार्ट विकासकर्ताहरूले मद्दतको लागि विस्तारहरू निर्माण गरेका छन्। "CSS स्ट्याकिङ कन्टेक्स्ट इन्स्पेक्टर" क्रोम एक्सटेन्सन जस्ता उपकरणहरूले तपाईंलाई स्ट्याकिङ सन्दर्भ सिर्जना गर्ने तत्वहरूको बारेमा जानकारी देखाउन तपाईंको DevTools मा अतिरिक्त z-index ट्याब थप्छ।
IDE विस्तारहरू तपाइँ VS कोडको लागि यो जस्तै विस्तारको साथ विकासको क्रममा समस्याहरू पनि पत्ता लगाउन सक्नुहुन्छ, जसले सम्भावित स्ट्याकिङ सन्दर्भ मुद्दाहरूलाई सीधा तपाइँको सम्पादकमा हाइलाइट गर्दछ।
अनस्ट्याकिङ र नियन्त्रण पुन: प्राप्त गर्दै हामीले मूल कारण पहिचान गरिसकेपछि, अर्को चरण यसको सामना गर्नु हो। त्यहाँ धेरै तरिकाहरू छन् जुन तपाईंले यस समस्यालाई समाधान गर्न लिन सक्नुहुन्छ, र म तिनीहरूलाई क्रमबद्ध रूपमा सूचीबद्ध गर्नेछु। तपाईं कुनै पनि स्तरमा कसैलाई छनौट गर्न सक्नुहुन्छ, यद्यपि; कसैले अर्कोलाई गुनासो गर्न वा अवरोध गर्न सक्दैन। HTML संरचना परिवर्तन गर्नुहोस् यो इष्टतम समाधान मानिन्छ। तपाइँ स्ट्याकिङ सन्दर्भ मुद्दामा भाग लिनको लागि, तपाइँले तपाइँको HTML भित्र हास्यास्पद स्थानहरूमा केहि तत्वहरू राख्नुपर्छ। पृष्ठको पुनर्संरचनाले तपाईंलाई DOM लाई पुन: आकार दिन र स्ट्याकिङ सन्दर्भ समस्या हटाउन मद्दत गर्नेछ। समस्याग्रस्त तत्व फेला पार्नुहोस् र HTML मार्कअपमा ट्र्यापिङ तत्वबाट हटाउनुहोस्। उदाहरणका लागि, हामी .modal-कन्टेनरलाई हेडरबाट बाहिर सारेर र यसलाई आफैले
तत्वमा राखेर पहिलो परिदृश्य, "The Trapped Modal" लाई समाधान गर्न सक्छौं।हेडर
मुख्य सामग्री
यस सामग्रीमा २ को z-इन्डेक्स छ र अझै पनि मोडललाई कभर गर्दैन।
जब तपाइँ "ओपन मोडल" बटनमा क्लिक गर्नुहुन्छ, मोडल अन्य सबै चीजहरूको अगाडि राखिएको छ जस्तो मानिन्छ। पेन परिदृश्य 1 हेर्नुहोस्: शोयोम्बो गेब्रियल आयोमाइड द्वारा ट्र्याप्ड मोडल (समाधान) [फोर्क गरिएको]। समायोजन गर्नुहोस्CSS मा अभिभावक स्ट्याकिङ सन्दर्भ यदि तत्व एक हो भने तपाईं लेआउट तोडेर सार्न सक्नुहुन्न? यो मुद्दालाई सम्बोधन गर्न राम्रो छ: अभिभावकले सन्दर्भ स्थापना गर्दछ। सन्दर्भ ट्रिगर गर्न जिम्मेवार CSS गुण (वा गुणहरू) फेला पार्नुहोस् र यसलाई हटाउनुहोस्। यदि यसको उद्देश्य छ र हटाउन सकिँदैन भने, सम्पूर्ण कन्टेनर उठाउनको लागि अभिभावकलाई यसको दाजुभाइ तत्वहरू भन्दा उच्च z-अनुक्रमणिका मान दिनुहोस्। उच्च z-इन्डेक्स मानको साथ, अभिभावक कन्टेनर शीर्षमा सर्छ, र यसको बच्चाहरू प्रयोगकर्ताको नजिक देखिन्छन्। हामीले "द सबमर्ज्ड ड्रपडाउन" परिदृश्यमा सिकेका कुराहरूको आधारमा, हामी ड्रपडाउनलाई नेभबारबाट बाहिर सार्न सक्दैनौं; यसले कुनै अर्थ राख्दैन। यद्यपि, हामी .navbar कन्टेनरको z-index मान .content एलिमेन्टको z-index मानभन्दा ठूलो बनाउन सक्छौं। .navbar { पृष्ठभूमि: #333; /* z-अनुक्रमणिका: १; */ z-सूचकांक: 3; स्थिति: सापेक्ष; }
यस परिवर्तनको साथ, ड्रपडाउन-मेनु अब कुनै पनि समस्या बिना सामग्रीको अगाडि देखा पर्दछ। पेन परिदृश्य 2 हेर्नुहोस्: शोयोम्बो गेब्रियल आयोमाइड द्वारा जलमग्न ड्रपडाउन (समाधान) [फोर्क गरिएको]। पोर्टलहरू प्रयास गर्नुहोस्, यदि फ्रेमवर्क प्रयोग गर्दै हुनुहुन्छ React वा Vue जस्ता फ्रेमवर्कहरूमा, पोर्टल भनेको एउटा विशेषता हो जसले तपाईंलाई DOM मा यसको सामान्य अभिभावक पदानुक्रम बाहिरको कम्पोनेन्ट रेन्डर गर्न दिन्छ। पोर्टलहरू तपाईंको घटकहरूको लागि टेलिपोर्टेशन उपकरण जस्तै हुन्। तिनीहरूले तपाईंलाई कागजातमा कुनै पनि कम्पोनेन्टको HTML रेन्डर गर्न दिन्छ (सामान्यतया document.body मा) जबकि यसलाई प्रोप्स, राज्य र घटनाहरूको लागि यसको मूल अभिभावकसँग तार्किक रूपमा जडान राख्छ। यो स्ट्याकिङ कन्टेक्स्ट ट्र्यापबाट बच्नका लागि उपयुक्त छ किनकि रेन्डर गरिएको आउटपुट शाब्दिक रूपमा समस्याग्रस्त अभिभावक कन्टेनर बाहिर देखिन्छ। ReactDOM.createPortal( <उपकरण टिप />, कागजात। शरीर );
यसले तपाइँको ड्रपडाउन सामग्रीलाई अभिभावकको पछाडि लुकेको छैन भनी सुनिश्चित गर्दछ, अभिभावकको ओभरफ्लो भए पनि: लुकेको वा कम z-सूचकाङ्क। हामीले पहिले हेरेको "द क्लिप गरिएको टुलटिप" परिदृश्यमा, मैले ओभरफ्लोबाट टुलटिपलाई बचाउन पोर्टल प्रयोग गरें: लुकेको क्लिपलाई कागजातको मुख्य भागमा राखेर र कन्टेनर भित्र ट्रिगरको माथि राखेर। पेन परिदृश्य 3 हेर्नुहोस्: शोयोम्बो गेब्रियल आयोमाइड द्वारा क्लिप गरिएको टुलटिप (समाधान) [फोर्क गरिएको]। साइड इफेक्टहरू बिना स्ट्याकिङ सन्दर्भ प्रस्तुत गर्दै अघिल्लो खण्डमा वर्णन गरिएका सबै दृष्टिकोणहरू समस्याग्रस्त स्ट्याकिङ सन्दर्भहरूबाट तत्वहरूलाई "अनस्ट्याकिङ" गर्ने उद्देश्यमा छन्, तर त्यहाँ केही अवस्थाहरू छन् जहाँ तपाईंलाई वास्तवमा स्ट्याकिङ सन्दर्भ सिर्जना गर्न चाहिन्छ। नयाँ स्ट्याकिंग सन्दर्भ सिर्जना गर्न सजिलो छ, तर सबै दृष्टिकोणहरू साइड इफेक्टको साथ आउँछन्। त्यो हो, अलगाव प्रयोग बाहेक: अलग। जब कुनै तत्वमा लागू हुन्छ, त्यस तत्वका बच्चाहरूको स्ट्याकिङ सन्दर्भ प्रत्येक बच्चा र त्यो सन्दर्भ भित्रका तत्वहरूबाट प्रभावित हुनुको सट्टा सापेक्ष निर्धारण गरिन्छ। एक उत्कृष्ट उदाहरणले त्यो तत्वलाई नकारात्मक मान प्रदान गर्दैछ, जस्तै z-index: -1। कल्पना गर्नुहोस् कि तपाईंसँग .card कम्पोनेन्ट छ। तपाईं कार्डको पाठको पछाडि बस्ने तर कार्डको पृष्ठभूमिको शीर्षमा सजावटी आकार थप्न चाहनुहुन्छ। कार्डमा स्ट्याकिङ सन्दर्भ बिना, z-index: -1 ले आकारलाई मूल स्ट्याकिङ सन्दर्भ (पूरा पृष्ठ) को फेदमा पठाउँछ। यसले कार्डको सेतो पृष्ठभूमि पछाडि हराउँछ: शोयोम्बो गेब्रियल आयोमाइड द्वारा पेन नेगेटिभ z-इन्डेक्स (समस्या) [फोर्क गरिएको] हेर्नुहोस्। यसलाई समाधान गर्न, हामी अलगाव घोषणा गर्छौं: अभिभावक .card मा आइसोलेट: शोयोम्बो गेब्रियल आयोमाइड द्वारा पेन नेगेटिभ z-इन्डेक्स (समाधान) [फोर्क गरिएको] हेर्नुहोस्। अब, .card तत्व आफैं स्ट्याकिङ सन्दर्भ बन्छ। जब यसको चाइल्ड एलिमेन्ट — :before pseudo-element — मा सिर्जना गरिएको सजावटी आकारमा z-index: -1 हुन्छ, यो अभिभावकको स्ट्याकिङ सन्दर्भको एकदमै तल जान्छ। यो पाठको पछाडि र कार्डको पृष्ठभूमिको शीर्षमा पूर्ण रूपमा विराजमान छ, उद्देश्य अनुसार। निष्कर्ष सम्झनुहोस्: अर्को पटक तपाईंको z-index नियन्त्रण बाहिर देखिन्छ, यो एक फँसिएको स्ट्याकिङ सन्दर्भ हो। सन्दर्भहरू
स्ट्याकिङ सन्दर्भ (MDN) Z-सूचकाङ्क र स्ट्याकिङ सन्दर्भहरू (web.dev) "कसरी CSS मा अलगाव सम्पत्ति संग नयाँ स्ट्याकिङ सन्दर्भ सिर्जना गर्ने", नेटली पिना "के हेक, z-सूचकांक??", जोश कमाउ
SmashingMag मा थप पढाइ
"ठूला परियोजनाहरूमा CSS Z-Index प्रबन्ध गर्दै", स्टीवन फ्रिसन "स्टिकी हेडर र पूर्ण-उचाइ तत्वहरू: एक कठिन संयोजन", फिलिप ब्रौनेन "कम्पोनेन्ट-आधारित वेब अनुप्रयोगमा जेड-इन्डेक्स प्रबन्ध गर्दै", पावेल पोमेरन्टसेभ "Z-Index CSS सम्पत्ति: एक व्यापक रूप", लुइस लाजारिस
