तुमी केन्ना तुमच्या CSS तल्या घटकाचेर z-index: 99999 सेट केला, आनी तो हेर घटकां वयल्यान भायर सरना? इतलें व्हड मोलान तें घटक सहजपणान हेर खंयच्याय वस्तूचेर दृश्टीन दवरचें, सगळे वेगवेगळे घटक एक तर उण्या मोलाचेर सेट केल्यात वा बिल्कुल सेट करूंक नात अशें मानून. वेबपान चड करून द्विमात्रिक जाग्यार दाखयतात; पूण विशिश्ट CSS गुणधर्म लागू करून खोलाय सांगपाखातीर काल्पनीक z-अक्ष विमानाची सुरवात करतात. हें विमान पडद्याक लंब आसता आनी तातूंतल्यान वापरप्याक घटकांचो क्रम, एकाचेर दुसऱ्याचेर जाणवता. काल्पनीक z-अक्षा फाटली कल्पना, वापरप्याची स्टॅक केल्ल्या घटकांविशींची धारणा, ती तयार करपी CSS गुणधर्म एकठांय येवन आमी स्टॅकिंग संदर्भ म्हणटात तें तयार करतात. वेबपानाचेर घटक कशे “स्टॅक” जातात, स्टॅकिंग क्रम कितें नियंत्रीत करता, आनी गरज पडल्यार घटक “अनस्टॅक” करपाचे वेव्हारीक पद्दती विशीं आमी उलयतले. संदर्भ स्टॅकिंग करपा विशीं तुमचें वेबपान एक मेज म्हणून कल्पना करात. जशें जशें तुमी HTML घटक जोडटात, तशें तशें तुमी कागदाचे कुडके, एका फाटल्यान एक, मेजाचेर घालतात. निमाणो कागदाचो कुडको सगळ्यांत हालीं जोडिल्ल्या HTML घटका बरोबर आसता, आनी तो ताचे मुखार दवरिल्ल्या हेर सगळ्या कागदांचेर बसता. हो सामान्य दस्तावेज प्रवाह आसा, नेस्टेड घटकांखातीर लेगीत. डेस्क स्वता मुळाव्या स्टॅकिंग संदर्भाचें प्रतिनिधित्व करता, जो घटकान तयार केला, जातूंत हेर सगळे फोल्डर आसतात. आतां, विशिश्ट CSS गुणधर्म कामांत येतात. position (z-index कडेन), opacity, transform, आनी contain) सारकिले गुणधर्म फोल्डरा सारके वावुरतात. हो फोल्डर एक घटक आनी ताचीं सगळीं भुरगीं घेता, तांकां मुखेल स्टॅका वयल्यान काडटा, आनी तांकां वेगळ्या उप-स्टॅकांत गट करता, जाका लागून आमी स्टॅकिंग संदर्भ म्हणटात तें तयार करता. पोझिशन केल्ल्या घटकांखातीर, जेन्ना आमी ऑटो सोडून हेर z-index मोल जाहीर करतात तेन्ना अशें जाता. अपारदर्शकता, रुपांतर, आनी फिल्टर सारकिल्या गुणधर्मांखातीर, विशिश्ट मोलां लागू करतना स्टॅकिंग संदर्भ आपोआप तयार जाता.
हें समजून घेवपाचो यत्न करात: एकदां कागदाचो कुडको (म्हळ्यार, भुरगो घटक) फोल्डरा भितर आसल्यार (म्हळ्यार, पालकाच्या स्टॅकिंग संदर्भांत), तो केन्नाच त्या फोल्डरांतल्यान भायर सरूंक शकना वा वेगळ्या फोल्डरांतल्या कागदां मदीं दवरूंक शकना. ताचो z-index आतां फकत ताच्याच फोल्डरा भितर प्रासंगीक आसा.
सकयल दिल्ल्या चित्रांत, पेपर B आतां फोल्डर B च्या स्टॅकिंग संदर्भा भितर आसा, आनी फकत फोल्डरांतल्या हेर पेपरां वांगडा ऑर्डर करूंक मेळटा.
तुमी जाय जाल्यार कल्पना करात, तुमच्या मेजाचेर दोन फोल्डर आसात:
.फोल्डर-एक { z-अनुक्रमणिका: 1; } . .फोल्डर-बी { z-अनुक्रमणिका: 2; } .
मार्कअप मात्शें अपडेट करूंया. फोल्डर A भितर एक खाशेलें पान आसा, z-index: 9999. फोल्डर B भितर एक सादें पान आसा, z-index: 5.
.विशेष-पान { z-अनुक्रमणिका: 9999; } . .सादें-पान { z-अनुक्रमणिका: 5; } .
खंयचें पान वयल्यान आसा? तो फोल्डर B तलो .plain-page.ब्राउझर बाल कागदपत्रां कडेन दुर्लक्ष करता आनी पयलीं दोन फोल्डर स्टॅक करता. ताका फोल्डर बी (z-index: 2) दिसता आनी तो फोल्डर A (z-index: 1) चेर दवरता कारण दोन एका परस व्हड आसात हें आमकां खबर आसा. मजगतीं, z-index: 9999 पानाचेर सेट केल्लें .special-page पान ताचो z-index शक्य तितले चड मोलाचेर सेट केल्लो आसलो तरी स्टॅकाच्या सकयल आसा. स्टॅकिंग संदर्भ नेस्ट करपाकय मेळटात (फोल्डरां भितर फोल्डर), “कुटुंब झाड” तयार करून. हेंच तत्व लागू जाता: भुरगें आपल्या आवय-बापायच्या फोल्डरांतल्यान केन्नाच सुटूंक शकना. आतां तुमकां मेळ्ळां की स्टॅकिंग संदर्भ थर गट करतात आनी परतून क्रमवारीत करपी फोल्डरां भशेन कशे वागतात, तें विचारपा सारकें आसा: कांय गुणधर्म — जशे की रुपांतर आनी अपारदर्शकता — नवे स्टॅकिंग संदर्भ कित्याक तयार करतात? हांगासर गजाल आसा: हे गुणधर्म कशे दिसतात ताका लागून स्टॅकिंग संदर्भ तयार करिनात; ब्राउझर हुडा सकयल कसो काम करता ताका लागून ते करतात. जेन्ना तुमी रुपांतर, अपारदर्शकता, फिल्टर वा दृष्टीकोन लागू करतात, तेन्ना तुमी ब्राउझराक सांगतात, “अरे, हो घटक हालूंक शकता, घुंवूंक शकता वा फीको जावंक शकता, देखून तयार रावचें!”
जेन्ना तुमी हे गुणधर्म वापरतात, तेन्ना ब्राउझर रेंडरींग चड कार्यक्षमतेन वेवस्थापन करपाक नवो स्टॅकिंग संदर्भ तयार करता. हाका लागून ब्राउझराक एनिमेशन, रुपांतर आनी व्हिज्युअल इफेक्ट स्वतंत्रपणान हाताळपाक मेळटा, जाका लागून हे घटक उरिल्ल्या पानाचेर कशे संवाद सादतात हाची परतून गणना करपाची गरज उणी जाता. ब्राउझर म्हणटा अशें समजून घेयात, “हांव हें फोल्डर वेगळें हाताळटलो म्हणजे दर खेपे तातूंतलें कितेंय बदलता तेन्ना पुराय डेस्कांत फेरबदल करची पडची ना.” पूण आसाएक दुश्परिणाम. एकदां ब्राउझरान घटक स्वताच्या थरांत उखललो म्हणटकच, ताणें तातूंतलें सगळें “सपाट” करचें पडटलें, नवो स्टॅकिंग संदर्भ तयार करचो. हें फोल्डर वेगळें हाताळपाक मेजावयल्यान काडून घेवपा सारकें; त्या फोल्डरा भितरलें सगळें गट जाता, आनी ब्राउझर आतां कितें कितें ताचेर बसता तें थारायतना ताका एकूच एकक म्हणून वागता. देखून जरी रुपांतर आनी अपारदर्शकता गुणधर्म घटक दृश्टीन स्टॅक करपाचे पद्दतीचेर परिणाम करतात अशें दिसूंक नासलें तरी, ते करतात, आनी तें कार्यक्षमताय ऑप्टिमायझेशन खातीर. हेर जायते CSS गुणधर्मय अशाच कारणांक लागून स्टॅकिंग संदर्भ तयार करूंक शकतात. तुमकां खोलायेन खणपाक जाय जाल्यार एमडीएन पुराय वळेरी दिता. बरेचशे आसात, जे फकत कळनासतना अनवळखीपणान स्टॅकिंग संदर्भ तयार करप कितलें सोंपें तें दाखयता. “अनस्टॅकिंग” ही समस्या स्टॅकिंग प्रस्न जायत्या कारणांक लागून निर्माण जावंक शकतात, पूण कांय कारणां परस चड प्रमाणांत दिसतात. मोडल घटक हो एक अभिजात नमुनो आसा कारण तांकां घटकाक हेर सगळ्या घटकां परस वयल्या थराचेर “उगडपाक” टॉगल करचो पडटा, मागीर तो “बंद” आसतना वयल्या थरांतल्यान काडून उडोवचो पडटा. आमी सगळ्यांनी एक मोडल उगडपाची परिस्थिती आयल्या आनी खंयच्याय कारणाक लागून तें दिसना असो म्हाका पुराय विस्वास आसा. तें सारकें उगडलें ना अशें न्हय, पूण स्टॅकिंग संदर्भाच्या सकयल्या थरांत तें पळोवपा भायर आसा. हाका लागून तुमकां “कशें जालां?” तुमी सेट केल्या उपरांत:
.ओव्हरले { . स्थिती: स्थिर; /* स्टॅकिंग संदर्भ तयार करता */ z-अनुक्रमणिका: १; /* घटकाक हेर सगळ्यां वयल्यान थराचेर दवरता */ इनसेट: 0; रुंदाय: १००%; उंचाय: 100vh; ओव्हरफ्लो: लिपलेले; पार्श्वभूंय-रंग: # 00000080; } .
हें बरोबर दिसता, पूण मोडल ट्रिगर आशिल्लो पालक घटक दुसर् या पालक घटका भितरलो भुरगो घटक आसल्यार जो z-index: 1 चेरूय सेट केला, जो तंत्रीक नदरेन मोडलाक मुखेल फोल्डरान अस्पश्ट केल्ल्या उपथरांत दवरता. ती विशिश्ट परिस्थिती आनी हेर एक दोन सामान्य स्टॅकिंग-संदर्भ फांटे पळोवया. म्हाका दिसता, अनवळखीपणान स्टॅकिंग संदर्भ तयार करप कितलें सोंपें न्हय, तर तांचें गैरवेवस्थापन कशें करप तें तुमकां दिसतलें. तशेंच, तुमी वेवस्थापन केल्ले स्थितींत कशे परत येतात तें परिस्थितीचेर आदारून आसता. परिस्थिती 1: द ट्रॅप्ड मोडल
तुमकां तुमचो मोडल उण्या पांवड्याच्या थरांत आडखळिल्लो रोखडोच पळोवंक मेळटा आनी पालकाची वळख करूं येता. ब्राउझर विस्तार स्मार्ट विकसकांनी मदत करपाक विस्तार तयार केल्यात. अशे साधन “CSS स्टॅकिंग संदर्भ निरिक्षक” Chrome विस्तार तुमच्या DevTools कडेन अतिरिक्त z-index टॅब जोडटात तुमकां स्टॅकिंग संदर्भ तयार करपी घटकां विशीं म्हायती दाखोवपाक.
आयडीई विस्तार तुमी VS कोड खातीर ह्या सारकिल्या विस्तारान विकासाच्या वेळार समस्या लेगीत पळोवंक शकतात, जो तुमच्या संपादकांत थेट संभाव्य स्टॅकिंग संदर्भ प्रस्न उजवाडाक हाडटा.
अनस्टॅकिंग आनी नियंत्रण परत मेळोवप आमी मुळावें कारण वळखून घेतले उपरांत फुडलें पावल म्हळ्यार ताका हाताळप. ही समस्या सोडोवपाक तुमी जायते पद्दती आपणावंक शकतात, आनी हांव तांची क्रमवारी वळेरी करतलों. खंयच्याय पांवड्यार कोणाकूय वेंचून काडूंक मेळटा, तरी; कोणूच दुसऱ्याक कागाळ करपाक वा आडमेळीं हाडूंक शकना. एचटीएमएल संरचना बदलात हाका इष्टतम निश्चीत मानतात. तुमकां स्टॅकिंग संदर्भ प्रस्नांत धांवपा खातीर, तुमी तुमच्या HTML भितर कांय घटक मजेशीर सुवातेर दवरल्यात आसूंक जाय. पानाची पुनर्रचना केल्यार तुमकां DOM चो नवो आकार दिवपाक आनी स्टॅकिंग संदर्भ समस्या ना करपाक मदत जातली. समस्याप्रधान घटक सोदून काडात आनी HTML मार्कअपांतल्या ट्रॅपिंग घटका वयल्यान काडून उडोवचो. देखीक, आमी पयली परिस्थिती, “The Trapped Modal,” सोडोवंक शकतात, .modal-container शीर्षका भायर व्हरून आनी तो स्वता
घटकांत दवरून.<शीर्षक वर्ग="शीर्षक">
शीर्षक
हें नांव <मुखेल वर्ग="सामग्री">मुखेल आशय
ह्या सामुग्रीचो z-अनुक्रमणिका 2 आसा आनी अजूनय मोडलाक आस्पाव करचो ना.
अशें म्हण्टात
मोडल शीर्षक
आतां, हांव खंयच्याच गजाली फाटल्यान ना. DOM पुनर्रचनेचो परिणाम म्हणून म्हाका बरी सुवात मेळ्ळ्या.
जेन्ना तुमी “Open Modal” बटण क्लिक करतात, तेन्ना मोडल आसपाक जाय तशें हेर सगळ्यां मुखार दवरतात. पळयात पेन परिस्थिती 1: द ट्रॅप्ड मोडल (सोल्युशन) [फोर्क केल्लो] शोयोम्बो गॅब्रिएल अयोमायड. समायोजीत करचें दCSS मदीं पालक स्टॅकिंग संदर्भ घटक जर मांडावळ मोडले बगर हालोवंक मेळना जाल्यार कितें? मुद्दो सोडोवप बरें: पालक संदर्भ स्थापन करता. संदर्भ सुरू करपाक जापसालदार आशिल्लो CSS गुणधर्म (वा गुणधर्म) सोदून काडात आनी तो काडून उडोवचो. ताचो उद्देश आसल्यार आनी तो काडून उडोवंक मेळना जाल्यार, पुराय कंटेनर उखलपाखातीर पालकाक ताच्या भावंड घटकांपरस चड z-index मोल दिवचें. चड z-index मोलान, पालक कंटेनर वयल्यान वता, आनी ताचीं भुरगीं वापरप्याक लागीं दिसतात. “The Submerged Dropdown” परिस्थितींत आमी शिकल्यात ताचेर आदारीत, आमी ड्रॉपडावन नॅव्हबारांतल्यान भायर व्हरूंक शकनात; ताका अर्थ आसचो नासलो. पूण, आमी .navbar कंटेनराचें z-index मोल .content घटकाच्या z-index मोला परस व्हड करपाक वाडोवंक शकतात. .नवबार { . पार्श्वभूंय: # 333; /* z-अनुक्रमणिका: 1; */ z-अनुक्रमणिका: 3; स्थिती: सापेक्ष; } .
ह्या बदला वांगडा, .dropdown-menu आतां कसलोच प्रस्न नासतना सामुग्री मुखार दिसता. पळयात पेन परिस्थिती 2: द सबमर्जड ड्रॉपडावन (सोल्युशन) [फोर्क केल्लो] शोयोम्बो गॅब्रिएल अयोमायड. पोर्टल वापरून पळयात, जर फ्रेमवर्क वापरतात जाल्यार React वा Vue सारकिल्या चौकटींत, पोर्टल हें एक वैशिश्ट्य आसा जें तुमकां DOM त ताच्या सामान्य पालक श्रेणीबध्दते भायर घटक रेंडर करूंक दिता. पोर्टल तुमच्या घटकां खातीर टेलीपोर्टेशन साधना सारके आसात. ते तुमकां घटकाचें HTML दस्तावेजांत खंयच्याय सुवातेर (सादारणपणान document.body मदीं बरोबर) रेंडर करूंक दितात आनी तेच बरोबर तो प्रॉप्स, राज्य आनी घडणुकां खातीर ताच्या मूळ पालकाक तार्कीक रितीन जोडिल्लो दवरतात. रेंडर केल्लें उत्पादन अक्षरशः समस्याप्रधान पालक कंटेनर भायर दिसता देखून स्टॅकिंग संदर्भ सापळ्यांतल्यान सुटपा खातीर हें परिपूर्ण आसा. रिएक्टडोम.पोर्टल तयार करचें ( <साधन टिप />, 1.1. दस्तावेज.शरीर );
हाका लागून तुमची ड्रॉपडावन सामुग्री ताच्या पालक फाटल्यान लिपल्या ना हाची खात्री जाता, जरी पालकांत ओव्हरफ्लो आसलो तरी: लिपला वा सकयलो z-अनुक्रमणिका. आमी पयलीं पळयल्ल्या “The Clipped Tooltip” परिस्थितींत, हांवें टूलटिपाक ओव्हरफ्लो पासून सोडवपाक पोर्टल वापरलें: दस्तावेजाच्या बॉडींत दवरून आनी कंटेनरांतल्या ट्रिगराचेर दवरून लिपयल्ली क्लिप. पळयात पेन परिस्थिती 3: द क्लिपड टूलटिप (सोल्युशन) [फोर्क केल्लो] शोयोम्बो गॅब्रिएल अयोमायड. दुश्परिणाम नासतना स्टॅकिंग संदर्भाची वळख करून दिवप फाटल्या विभागांत स्पश्ट केल्ले सगळे पद्दती समस्याप्रधान स्टॅकिंग संदर्भांतल्यान घटकांक “अनस्टॅकिंग” करपाचो हेतू आसात, पूण कांय परिस्थिती आसात जंय तुमकां प्रत्यक्षांत स्टॅकिंग संदर्भ तयार करपाची गरज आसतली वा करपाची इत्सा आसतली. नवो स्टॅकिंग संदर्भ तयार करप सोंपें आसा, पूण सगळे पद्दती दुश्परिणामा वांगडा येतात. म्हणल्यार आयसोलेशन वापरप सोडल्यार: आयसोलेशन. घटकाक लागू केल्यार त्या घटकाच्या भुरग्यांचो स्टॅकिंग संदर्भ दर एका भुरग्याच्या सापेक्ष आनी त्या संदर्भा भितर थारायतात, ताचे भायल्या घटकांचो प्रभाव पडचे परस. एक अभिजात उदाहरण म्हणल्यार त्या घटकाक ऋण मोल दिवप, जशें z-index: -1. कल्पना करात तुमचे कडेन .कार्ड घटक आसा. तुमकां .card च्या मजकूराच्या फाटल्यान बसपी, पूण कार्डाच्या फाटभूंयेर बसपी सजावटीचो आकार जोडपाचो आसा. कार्डाचेर स्टॅकिंग संदर्भ नासतना, z-index: -1 आकार मुळाव्या स्टॅकिंग संदर्भाच्या सकयल (सगलें पान) धाडटा. हाका लागून .card च्या धव्या पार्श्वभूमी फाटल्यान तो ना जाता: शोयोम्बो गॅब्रिएल अयोमायड हाणें बरयल्लो पेन नेगेटिव्ह z-इंडेक्स (समस्या) [फोर्क केल्लो] पळयात. हें सोडोवपाक, आमी एकसुरेपण जाहीर करतात: पालक .कार्डाचेर वेगळेपण: शोयोम्बो गॅब्रिएल अयोमायड हाणें बरयल्लो पेन नेगेटिव्ह z-इंडेक्स (सोल्युशन) [फोर्क केल्लो] पळयात. आतां, .card घटक स्वता एक स्टॅकिंग संदर्भ जाता. जेन्ना ताचो भुरगो घटक — :before pseudo-element चेर तयार केल्लो सजावटीचो आकार — z-index: -1 आसता, तेन्ना तो पालकाच्या स्टॅकिंग संदर्भाच्या सामक्या सकयल वता. तो मजकूराच्या फाटल्यान आनी कार्डाच्या फाटभूंयेर एकदम बरो बसता, हेतू प्रमाण. निश्कर्श काडप उगडास दवरात: फुडले खेपे तुमचो z-index नियंत्रणा भायर दिसता, तो एक आडखळिल्लो स्टॅकिंग संदर्भ. संदर्भ आसात
स्टॅकिंग संदर्भ (एमडीएन) 1.1. Z-index आनी स्टॅकिंग संदर्भ (web.dev) “सीएसएसांतल्या आयसोलेशन प्रॉपर्टी कडेन नवो स्टॅकिंग संदर्भ कसो तयार करचो”, नताली पिना “व्हाट द हेक, झॅड-इंडेक्स??”, जोश कोमेओ
स्मॅशिंगमॅगाचेर फुडलें वाचन
“बड प्रकल्पांत सीएसएस झॅड-इंडेक्स वेवस्थापन”, स्टीवन फ्रीसन “स्टिकी हेडर्स आनी फुल-हायट एलिमेंट्स: अ ट्रिकी कॉम्बिनेशन”, फिलीप ब्राउनेन “एक घटक-आधारीत वेब ऍप्लिकेशनांत झॅड-इंडेक्स वेवस्थापन”, पावेल पोमेरेंसेव्ह “द झॅड-इंडेक्स सीएसएस प्रॉपर्टी: अ कम्प्रीहेंसिव्ह लुक”, लुईस लाझारीस
