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