4 कारण आपका z-index काम नहीं कर रहा है (और इसे कैसे ठीक करें)

जेड-इंडेक्स क्या है? Z-index एक CSS गुण है जो आपको HTML तत्वों को एक दूसरे के ऊपर परतों में रखने की अनुमति देता है। यह पहली बार में आसान लगता है, लेकिन यह भ्रामक रूप से सरल है।

कुछ अजीब, गैर-सहज ज्ञान युक्त नियम हैं जो इसे आपके इच्छित व्यवहार नहीं कर सकते हैं- भले ही आप z-index को 999999 पर सेट करें!

यह लेख चार सबसे सामान्य कारणों के बारे में विस्तार से बताएगा कि z-index आपके लिए काम नहीं कर रहा है। आप सीखेंगे कि तत्वों को आगे या पीछे अन्य तत्वों के पीछे लाने के लिए सीएसएस का उपयोग कैसे करें।

1. समान स्टैकिंग संदर्भ में तत्व, पूर्व तत्वों के शीर्ष पर बाद वाले तत्वों के साथ, दिखने के क्रम में प्रदर्शित होंगे।

हमारे पहले उदाहरण में, हमारे पास अपेक्षाकृत सरल लेआउट है जिसमें 3 मुख्य तत्व शामिल हैं:

• बिल्ली की छवि
• पाठ के साथ एक सफेद ब्लॉक
• उसी बिल्ली की एक और छवि

उसके लिए यह HTML मार्कअप है:

<div class="cat-top"></div>
    
<div class="content__block">
  Meow meow meow...
</div>
    
<div class="cat-bottom"></div>

इस लेआउट में, हम आदर्श रूप से चाहते हैं कि टेक्स्ट का सफेद ब्लॉक दोनों बिल्लियों के ऊपर हो।

इसे प्राप्त करने का प्रयास करने के लिए, हमने दोनों कैट इमेज के लिए सीएसएस में कुछ नकारात्मक मार्जिन जोड़े हैं, ताकि वे सफेद ब्लॉक को थोड़ा ओवरलैप कर सकें:

.cat-top { 
    margin-bottom: -110px;
}  

.cat-bottom {    
    float: right;
    margin-top: -120px;
}

हालांकि, यह इस तरह दिखता है:

पेन जेड-इंडेक्स देखें:#1:स्थिति सेट करें, #2:प्राकृतिक स्टैकिंग ऑर्डर, #3:कोडपेन पर जेसिका (@thecodercoder) द्वारा सीएसएस गुण।

पहली बिल्ली वास्तव में सफेद सामग्री ब्लॉक के नीचे स्थित है, जैसा हम चाहते हैं। लेकिन दूसरी बिल्ली की छवि ब्लॉक के शीर्ष पर स्थित है!

ऐसा क्यों हो रहा है?

इस व्यवहार का कारण प्राकृतिक स्टैकिंग क्रम . के कारण है वेबपेज पर। ये दिशानिर्देश मूल रूप से निर्धारित करते हैं कि कौन से तत्व शीर्ष पर होंगे और कौन से नीचे होंगे।

यहां तक ​​​​कि अगर तत्वों का अपना z-index सेट नहीं है, तो एक कविता और कारण है कि कौन से शीर्ष पर होंगे।

हमारे मामले में, किसी भी तत्व का z-index मान नहीं है। तो उनका स्टैकिंग ऑर्डर उनके दिखने के क्रम से निर्धारित होता है। इस नियम के अनुसार, मार्कअप में बाद में आने वाले तत्व उनके सामने आने वाले तत्वों के शीर्ष पर होंगे।

(आप यहां मोज़िला डेवलपर नेटवर्क पर स्टैकिंग ऑर्डर दिशानिर्देशों के बारे में अधिक पढ़ सकते हैं।)

बिल्लियों और सफेद ब्लॉक के साथ हमारे उदाहरण में, वे इस नियम का पालन कर रहे हैं। इसलिए पहली बिल्ली सफेद ब्लॉक तत्व के नीचे है, और सफेद ब्लॉक दूसरी बिल्ली के नीचे है।

ठीक है, स्टैकिंग ऑर्डर सब ठीक है और अच्छा है, लेकिन हम सीएसएस को कैसे ठीक करते हैं ताकि दूसरी बिल्ली सफेद ब्लॉक के नीचे हो?

आइए दूसरा कारण देखें:

2. तत्व की स्थिति निर्धारित नहीं है

स्टैकिंग ऑर्डर निर्धारित करने वाले अन्य दिशानिर्देशों में से एक यह है कि क्या किसी तत्व की स्थिति निर्धारित है या नहीं।

किसी तत्व के लिए स्थिति निर्धारित करने के लिए, CSS position जोड़ें static . के अलावा किसी और चीज़ के लिए संपत्ति , जैसे relative या absolute . (आप मेरे द्वारा लिखे गए इस लेख में इसके बारे में अधिक पढ़ सकते हैं।)

इस नियम के अनुसार, अवस्थित तत्व असंबद्ध तत्वों के शीर्ष पर प्रदर्शित होंगे।

तो सफेद ब्लॉक को position: relative के रूप में सेट करना , और बिल्ली के दो तत्वों को बिना स्थान के छोड़ देने से सफेद ब्लॉक बिल्लियों के शीर्ष पर स्टैकिंग क्रम में आ जाएगा।

यह इस तरह दिखेगा- आप ऊपर दिए गए कोडपेन के साथ भी खेल सकते हैं।

वाह!

अब, अगली चीज़ जो हम करना चाहते हैं, वह है transform . का उपयोग करके नीचे की बिल्ली को उल्टा घुमाएं संपत्ति। इस तरह, दोनों बिल्लियाँ सफेद ब्लॉक के नीचे होंगी, केवल उनके सिर बाहर चिपके रहेंगे।

लेकिन ऐसा करने से अधिक z-index पैदा हो सकता है -संबंधित भ्रम। हम अगले भाग में समस्या और समाधान का समाधान करेंगे।

3. कुछ CSS गुण जैसे अस्पष्टता या परिवर्तन सेट करने से तत्व एक नए स्टैकिंग संदर्भ में आ जाएगा।

जैसा कि हमने अभी उल्लेख किया है, हम नीचे की बिल्ली को उल्टा करना चाहते हैं। इसे पूरा करने के लिए, हम जोड़ेंगे transform: rotate(180deg) ।

.cat-bottom { 
    float: right;
    margin-top: -120px;
    transform: rotate(180deg);
}

लेकिन इसके कारण नीचे की बिल्ली फिर से सफेद ब्लॉक के ऊपर प्रदर्शित होती है!

यहाँ क्या हो रहा है??

हो सकता है कि आप अक्सर इस समस्या का सामना न करें, लेकिन स्टैकिंग ऑर्डर का एक अन्य पहलू यह है कि कुछ CSS गुण जैसे transform या opacity तत्व को अपने नए स्टैकिंग संदर्भ में डाल देगा।

इसका मतलब यह है कि transform . जोड़ना .cat-bottom . तक तत्व ऐसा व्यवहार करता है जैसे कि उसके पास z-index . हो 0 का। भले ही इसकी position नहीं है या z-index बिल्कुल सेट! (W3.org के पास opacity . के साथ यह कैसे काम करता है, इस पर कुछ जानकारीपूर्ण लेकिन सघन दस्तावेज हैं संपत्ति)

याद रखें, हमने कभी भी z-index नहीं जोड़ा है सफेद ब्लॉक के लिए मान, केवल position: relative . यह सफेद ब्लॉक को बिना पोजीशन वाली बिल्लियों के ऊपर रखने के लिए पर्याप्त था।

लेकिन .bottom-cat . के बाद से तत्व कार्य कर रहा है जैसे कि यह अपेक्षाकृत z-index: 0 . के साथ स्थित है , इसे बदलने से इसे सफेद ब्लॉक के शीर्ष पर रखा गया है।

इसका समाधान position: relative set सेट करना है और स्पष्ट रूप से 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 स्तर के कारण निचले स्टैकिंग संदर्भ में है

आइए इसके लिए अपना कोड उदाहरण देखें:

कोडपेन पर जेसिका (@thecodercoder) द्वारा पेन जेड-इंडेक्स:#4 विभिन्न स्टैकिंग संदर्भ देखें।

यहाँ हमारे पास क्या है:नियमित सामग्री वाला एक साधारण वेबपेज, और एक गुलाबी साइड टैब जो सामग्री के शीर्ष पर स्थित "फ़ीडबैक भेजें" कहता है।

फिर, जब आप बिल्ली की तस्वीर पर क्लिक करते हैं, तो एक पारदर्शी ग्रे बैकग्राउंड ओवरले वाली एक मोडल विंडो खुलती है।

हालाँकि, जब मोडल विंडो खुली होती है, तब भी साइड टैब ग्रे ओवरले के शीर्ष पर होता है। हम चाहते हैं कि ओवरले साइड टैब सहित हर चीज पर प्रदर्शित हो।

आइए विचाराधीन तत्वों के लिए 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 स्तर से भिन्न है)। और मोडल सामग्री तत्व का एक बाल तत्व है।

क्योंकि मोडल सामग्री तत्व के अंदर है, इसका z-index 100 में से केवल उसके मूल, सामग्री तत्व के अंदर प्रभाव पड़ता है। उदाहरण के लिए, यदि अन्य बाल तत्व थे जो मोडल के भाई-बहन थे, तो उनका 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 {
    // No position set    
}

.modal {
    position: absolute;
    z-index: 100;
}

.side-tab {
    position: absolute;
    z-index: 5;
}

चूंकि सामग्री तत्व अब बिना स्थान के है, यह अब मोडल के z-index को सीमित नहीं करेगा मूल्य। तो खुले मोडल को इसके उच्च z-index के कारण, साइड टैब तत्व के शीर्ष पर स्थित किया जाएगा 100 में से।

हालांकि यह काम करता है, मैं व्यक्तिगत रूप से पहले समाधान के लिए जाऊंगा।

क्योंकि अगर भविष्य में किसी कारण से आपको सामग्री तत्व को स्थान देना है, तो यह फिर से स्टैकिंग संदर्भ में मोडल के क्रम को सीमित कर देगा।

सारांश में

मुझे आशा है कि आपको यह ट्यूटोरियल मददगार लगा होगा! संक्षेप में, जेड-इंडेक्स के साथ अधिकांश मुद्दों को इन दो दिशानिर्देशों का पालन करके हल किया जा सकता है:

1. जांचें कि तत्वों की स्थिति सेट और जेड-इंडेक्स संख्या सही क्रम में है।
2. सुनिश्चित करें कि आपके पास z-index . को सीमित करने वाले मूल तत्व नहीं हैं उनके बच्चों का स्तर।

संसाधन:

• W3.org:पारदर्शिता:'अपारदर्शिता' संपत्ति
• W3.org:स्टैक स्तर निर्दिष्ट करना
• मोज़िला डेवलपर नेटवर्क:स्टैकिंग प्रसंग
• PhilipWalton.com:जेड-इंडेक्स के बारे में आपको किसी ने क्या नहीं बताया
• स्मैशिंग मैगज़ीन:जेड-इंडेक्स सीएसएस प्रॉपर्टी