z-index क्या है? Z-index एक CSS प्रॉपर्टी है जो आपको HTML एलिमेंट्स को एक-दूसरे के ऊपर लेयर्स में स्थित करने की अनुमति देती है। यह पहली नज़र में सरल लगता है, लेकिन यह भ्रामक रूप से सरल है।
कुछ अजीब, गैर-सहज नियम हैं जो इसे उस तरह व्यवहार नहीं करने दे सकते जैसा आप चाहते हैं - भले ही आप z-index को 999999 पर सेट करें!
यह लेख विस्तार से बताएगा कि z-index आपके लिए काम क्यों नहीं कर रहा है, इसके चार सबसे आम कारण। आप सीखेंगे कि CSS का उपयोग करके एलिमेंट्स को सामने कैसे लाया जाए, या अन्य एलिमेंट्स के पीछे कैसे भेजा जाए।
1. एक ही स्टैकिंग कॉन्टेक्स्ट में एलिमेंट्स दिखाई देने के क्रम में प्रदर्शित होंगे, बाद के एलिमेंट्स पूर्व एलिमेंट्स के ऊपर।
हमारे पहले उदाहरण में, हमारे पास एक अपेक्षाकृत सरल लेआउट है जिसमें 3 मुख्य एलिमेंट्स शामिल हैं:
- एक बिल्ली की इमेज
- टेक्स्ट के साथ एक सफेद ब्लॉक
- उसी बिल्ली की एक और इमेज
उसके लिए HTML मार्कअप यहां है:
<div class="cat-top"></div> <div class="content__block"> Meow meow meow... </div> <div class="cat-bottom"></div>इस लेआउट में, हम आदर्श रूप से चाहते हैं कि सफेद टेक्स्ट ब्लॉक दोनों बिल्लियों के ऊपर हो।
इसे प्राप्त करने के प्रयास में, हमने दोनों बिल्ली इमेज के CSS में कुछ नकारात्मक मार्जिन जोड़े हैं, ताकि वे सफेद ब्लॉक को थोड़ा ओवरलैप करें:
.cat-top { margin-bottom: -110px; } .cat-bottom { float: right; margin-top: -120px; }हालांकि, यह ऐसा दिखता है:
See the Pen Z-index: #1: set position, #2: natural stacking order, #3: CSS properties by Jessica (@thecodercoder) on CodePen.
पहली बिल्ली वास्तव में सफेद कंटेंट ब्लॉक के नीचे स्थित है, जैसा हम चाहते हैं। लेकिन दूसरी बिल्ली इमेज ब्लॉक के ऊपर स्थित है!
यह क्यों हो रहा है?
इस व्यवहार का कारण वेबपेज पर प्राकृतिक स्टैकिंग ऑर्डर है। ये दिशानिर्देश मूल रूप से निर्धारित करते हैं कि कौन से एलिमेंट्स शीर्ष पर होंगे और कौन से नीचे।
यहां तक कि अगर एलिमेंट्स का z-index सेट नहीं है, तो एक तर्क और कारण है कि कौन से शीर्ष पर होंगे।
हमारे मामले में, किसी भी एलिमेंट का z-index मान नहीं है। तो उनका स्टैकिंग ऑर्डर उनके प्रकट होने के क्रम द्वारा निर्धारित होता है। इस नियम के अनुसार, मार्कअप में बाद में आने वाले एलिमेंट्स उन एलिमेंट्स के ऊपर होंगे जो उनसे पहले आते हैं।
(आप Mozilla Developer Network पर स्टैकिंग ऑर्डर दिशानिर्देशों के बारे में यहां अधिक पढ़ सकते हैं।)
बिल्लियों और सफेद ब्लॉक के हमारे उदाहरण में, वे इस नियम का पालन कर रहे हैं। इसलिए पहली बिल्ली सफेद ब्लॉक एलिमेंट के नीचे है, और सफेद ब्लॉक दूसरी बिल्ली के नीचे है।
ठीक है, स्टैकिंग ऑर्डर सब ठीक है, लेकिन हम CSS को कैसे ठीक करें ताकि दूसरी बिल्ली सफेद ब्लॉक के नीचे हो?
आइए दूसरे कारण को देखें:
2. एलिमेंट की पोजीशन सेट नहीं है
स्टैकिंग ऑर्डर निर्धारित करने वाले अन्य दिशानिर्देशों में से एक यह है कि क्या किसी एलिमेंट की पोजीशन सेट है या नहीं।
किसी एलिमेंट के लिए पोजीशन सेट करने के लिए, CSS position प्रॉपर्टी को static के अलावा किसी भी चीज़ पर सेट करें, जैसे relative या absolute। (आप इसके बारे में इस लेख में अधिक पढ़ सकते हैं जो मैंने लिखा है।)
इस नियम के अनुसार, पोजिशन्ड एलिमेंट्स अनपोजिशन्ड एलिमेंट्स के ऊपर प्रदर्शित होंगे।
तो सफेद ब्लॉक को position: relative पर सेट करना, और दोनों बिल्ली एलिमेंट्स को अनपोजिशन्ड छोड़ना, सफेद ब्लॉक को स्टैकिंग ऑर्डर में बिल्लियों के शीर्ष पर रखेगा।
यह ऐसा दिखेगा - आप ऊपर दिए गए Codepen के साथ भी खेल सकते हैं।
वाह!
अब, अगली चीज जो हम करना चाहते हैं वह है नीचे की बिल्ली को उल्टा घुमाना, transform प्रॉपर्टी का उपयोग करके। इस तरह, दोनों बिल्लियाँ सफेद ब्लॉक के नीचे होंगी, केवल उनके सिर बाहर निकले हुए।
लेकिन ऐसा करने से अधिक z-index-संबंधी भ्रम हो सकता है। हम अगले भाग में समस्या और समाधान को संबोधित करेंगे।
3. opacity या transform जैसे कुछ CSS प्रॉपर्टीज़ सेट करने से एलिमेंट एक नए स्टैकिंग कॉन्टेक्स्ट में चला जाता है।
जैसा कि हमने अभी उल्लेख किया है, हम नीचे की बिल्ली को उल्टा घुमाना चाहते हैं। इसे पूरा करने के लिए, हम transform: rotate(180deg) जोड़ेंगे।
.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }लेकिन इससे नीचे की बिल्ली फिर से सफेद ब्लॉक के ऊपर प्रदर्शित होती है!
यह क्या हो रहा है??
आप इस समस्या का सामना अक्सर नहीं कर सकते हैं, लेकिन स्टैकिंग ऑर्डर का एक अन्य पहलू यह है कि transform या opacity जैसे कुछ CSS प्रॉपर्टीज़ एलिमेंट को अपने स्वयं के, नए स्टैकिंग कॉन्टेक्स्ट में डाल देंगी।
इसका मतलब है कि .cat-bottom एलिमेंट में transform जोड़ने से यह व्यवहार करता है जैसे इसका z-index 0 हो। भले ही इसकी position या z-index बिल्कुल भी सेट न हो! (W3.org के पास इसके बारे में कुछ जानकारीपूर्ण लेकिन घनी दस्तावेज़ीकरण है कि यह opacity प्रॉपर्टी के साथ कैसे काम करता है।)
याद रखें, हमने कभी सफेद ब्लॉक पर z-index मान नहीं जोड़ा, केवल position: relative। यह अनपोजिशन्ड बिल्लियों के ऊपर सफेद ब्लॉक को स्थित करने के लिए पर्याप्त था।
लेकिन चूंकि .bottom-cat एलिमेंट ऐसा व्यवहार कर रहा है जैसे यह z-index: 0 के साथ अपेक्षाकृत पोजिशन्ड है, इसे ट्रांसफॉर्म करने से यह सफेद ब्लॉक के ऊपर स्थित हो गया है।
इसका समाधान कम से कम सफेद ब्लॉक पर position: relative सेट करना और स्पष्ट रूप से z-index सेट करना है। आप एक कदम आगे जाकर बिल्ली एलिमेंट्स पर position: relative और एक निचला z-index सेट कर सकते हैं, बस अतिरिक्त सुरक्षित रहने के लिए।
.content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; }मेरी राय में, ऐसा करने से अधिकांश, यदि सभी नहीं, तो बुनियादी z-index मुद्दों का समाधान हो जाएगा।
अब, आइए अपने अंतिम कारण पर चलते हैं कि आपका z-index काम क्यों नहीं कर रहा है। यह थोड़ा अधिक जटिल है, क्योंकि इसमें पैरेंट और चाइल्ड एलिमेंट्स शामिल हैं।
4. एलिमेंट अपने पैरेंट के z-index स्तर के कारण निचले स्टैकिंग कॉन्टेक्स्ट में है
आइए इसके लिए हमारे कोड उदाहरण को देखें:
See the Pen Z-index: #4 different stacking contexts by Jessica (@thecodercoder) on CodePen.
यहां हमारे पास है: नियमित कंटेंट के साथ एक सरल वेबपेज, और एक गुलाबी साइड टैब जो "Send Feedback" कहता है जो कंटेंट के ऊपर स्थित है।
फिर, जब आप बिल्ली की फोटो पर क्लिक करते हैं, तो एक पारदर्शी ग्रे बैकग्राउंड ओवरले के साथ एक मॉडल विंडो खुलती है।
हालांकि, मॉडल विंडो खुली होने पर भी, साइड टैब अभी भी ग्रे ओवरले के ऊपर है। हम चाहते हैं कि ओवरले हर चीज पर प्रदर्शित हो, साइड टैब सहित।
आइए प्रश्न में एलिमेंट्स के CSS को देखें:
.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }सभी एलिमेंट्स की पोजीशन सेट है, और साइड टैब का z-index 5 है, जो इसे कंटेंट एलिमेंट के ऊपर रखता है, जो z-index: 1 पर है।
फिर, मॉडल का z-index: 100 है जो चाहिए इसे साइड टैब के ऊपर z-index: 5 पर रखे। लेकिन इसके बजाय, मॉडल ओवरले साइड टैब के नीचे है।
यह क्यों हो रहा है?
पहले, हमने स्टैकिंग कॉन्टेक्स्ट में जाने वाले कुछ कारकों को संबोधित किया, जैसे कि क्या एलिमेंट की पोजीशन सेट है, साथ ही मार्कअप में इसका क्रम।
लेकिन स्टैकिंग कॉन्टेक्स्ट का एक और पहलू यह है कि एक चाइल्ड एलिमेंट अपने पैरेंट के स्टैकिंग कॉन्टेक्स्ट तक सीमित होता है।
आइए प्रश्न में तीन एलिमेंट्स को करीब से देखें।
यहां हमारे पास मार्कअप है:
<section class="content"> <div class="modal"></div> </section> <div class="side-tab"></div>मार्कअप को देखते हुए, हम देख सकते हैं कि कंटेंट और साइड टैब एलिमेंट्स सिबलिंग्स हैं। यानी वे मार्कअप में एक ही स्तर पर मौजूद हैं (यह z-index स्तर से अलग है)। और मॉडल कंटेंट एलिमेंट का एक चाइल्ड एलिमेंट है।
क्योंकि मॉडल कंटेंट एलिमेंट के अंदर है, इसका 100 का z-index केवल अपने पैरेंट, कंटेंट एलिमेंट के अंदर प्रभावी है। उदाहरण के लिए, यदि अन्य चाइल्ड एलिमेंट्स होते जो मॉडल के सिबलिंग होते, तो उनके z-index मान उन्हें एक-दूसरे के ऊपर या नीचे रखते।
लेकिन उन चाइल्ड एलिमेंट्स का z-index मान पैरेंट के बाहर कुछ भी नहीं मायने रखता, क्योंकि पैरेंट कंटेंट एलिमेंट का z-index 1 पर सेट है।
तो इसके बच्चे, मॉडल सहित, उस z-index स्तर से बाहर नहीं निकल सकते।
(आप इसे इस थोड़ा निराशाजनक रूपक के साथ याद रख सकते हैं: एक बच्चा अपने माता-पिता द्वारा सीमित हो सकता है, और उनसे मुक्त नहीं हो सकता।)
इस समस्या के कुछ समाधान हैं:
समाधान: मॉडल को कंटेंट पैरेंट के बाहर ले जाएं, और पेज के मुख्य स्टैकिंग कॉन्टेक्स्ट में।
सही किया गया मार्कअप तब इस तरह दिखेगा:
<section class="content"></section> <div class="modal"></div> <div class="side-tab"></div>अब, मॉडल एलिमेंट अन्य दो के लिए एक सिबलिंग एलिमेंट है। यह उन सभी तीन एलिमेंट्स को उनके समान स्टैकिंग कॉन्टेक्स्ट में रखता है, इसलिए उनमें से प्रत्येक का z-index स्तर अब एक-दूसरे को प्रभावित करेगा।
इस नए स्टैकिंग कॉन्टेक्स्ट में, एलिमेंट्स निम्न क्रम में प्रदर्शित होंगे, शीर्ष से नीचे:
- मॉडल (
z-index: 100) - साइड टैब (
z-index: 5) - कंटेंट (
z-index: 1)
वैकल्पिक समाधान: कंटेंट से पोजिशनिंग हटाएं, ताकि यह मॉडल के z-index को सीमित न करे।
यदि आप मार्कअप बदलना नहीं चाहते या नहीं बदल सकते, तो आप कंटेंट एलिमेंट से position सेटिंग को हटाकर इस समस्या को ठीक कर सकते हैं:
.content { // कोई पोजीशन सेट नहीं } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }चूंकि कंटेंट एलिमेंट अब अनपोजिशन्ड है, यह अब मॉडल के z-index मान को सीमित नहीं करेगा। तो खुला मॉडल अपने उच्च z-index 100 के कारण साइड टैब एलिमेंट के ऊपर स्थित होगा।
हालांकि यह काम करता है, मैं व्यक्तिगत रूप से पहले समाधान के लिए जाऊंगा।
क्योंकि यदि भविष्य में किसी कारण से आपको कंटेंट एलिमेंट को पोजिशन करना पड़े, तो यह फिर से मॉडल के स्टैकिंग कॉन्टेक्स्ट में क्रम को सीमित करेगा।
सारांश में
मुझे आशा है कि आपको यह ट्यूटोरियल उपयोगी लगा! संक्षेप में, z-index के साथ अधिकांश मुद्दों को इन दो दिशानिर्देशों का पालन करके हल किया जा सकता है:
- जांचें कि एलिमेंट्स की पोजीशन सेट है और z-index नंबर सही क्रम में हैं।
- सुनिश्चित करें कि आपके पास पैरेंट एलिमेंट्स नहीं हैं जो अपने बच्चों के
z-indexस्तर को सीमित कर रहे हैं।
संसाधन:
- W3.org: Transparency: the 'opacity' property
- W3.org: Specifying the stack level
- Mozilla Developer Network: The Stacking Context
- PhilipWalton.com: What No One Told You About Z-index
- Smashing Magazine: The Z-index CSS Property
