Z-इंडेक्स और स्टैकिंग कॉन्टेक्स्ट

सीएसएस पॉडकास्ट - 019: z-index और स्टैकिंग कॉन्टेक्स्ट

मान लें कि आपके पास कुछ ऐसे एलिमेंट हैं जो पूरी तरह से किसी दूसरे और उन्हें एक-दूसरे के ऊपर रखा जाना चाहिए. आप कुछ इस तरह का HTML लिख सकते हैं:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

हालांकि, डिफ़ॉल्ट रूप से इनमें से कौनसा विकल्प दूसरे के ऊपर होता है? यह जानने के लिए कि कौनसा आइटम ऐसा करेगा, आपको z-इंडेक्स और स्टैकिंग के संदर्भ को समझने की ज़रूरत है.

Z-इंडेक्स

z-index प्रॉपर्टी, ब्राउज़र के 3D स्पेस—Z ऐक्सिस के आधार पर, एचटीएमएल के लिए लेयर का क्रम सेट करती है. यही ऐक्सिस लेयर दिखाता है कि कौनसी लेयर आपके सबसे करीब हैं और आपसे दूर हैं. वेब पर वर्टिकल ऐक्सिस पर Y ऐक्सिस और हॉरिज़ॉन्टल ऐक्सिस X ऐक्सिस पर होता है.

z-index प्रॉपर्टी में अंकों वाली वैल्यू स्वीकार की जाती है. यह वैल्यू, पॉज़िटिव या नेगेटिव हो सकती है. अगर एलिमेंट में z-index की वैल्यू ज़्यादा है, तो वे दूसरे एलिमेंट के ऊपर दिखेंगे. अगर आपके एलिमेंट पर कोई z-index सेट नहीं है तो डिफ़ॉल्ट बिहेवियर यह है कि दस्तावेज़ के सोर्स का क्रम Z ऐक्सिस के हिसाब से तय होता है. इसका मतलब है कि दस्तावेज़ में नीचे मौजूद एलिमेंट, उन एलिमेंट के ऊपर दिखते हैं जो उनके पहले दिखते हैं.

सामान्य फ़्लो में, अगर आपने z-index के लिए कोई वैल्यू सेट की है और वह काम नहीं कर रही है, तो आपको एलिमेंट की position वैल्यू, static के अलावा किसी भी अन्य वैल्यू पर सेट करनी होगी. यह ऐसी आम जगह है जहां लोग z-index का इस्तेमाल करने में परेशानी करते हैं.

हालांकि, अगर आप फ़्लेक्सबॉक्स या ग्रिड कॉन्टेक्स्ट में हैं, तो ऐसा नहीं है क्योंकि position: relative जोड़े बिना, फ़्लेक्स या ग्रिड आइटम के z-इंडेक्स में बदलाव किया जा सकता है.

नेगेटिव z-इंडेक्स

किसी एलिमेंट को दूसरे एलिमेंट के पीछे सेट करने के लिए, z-index के लिए नेगेटिव मान जोड़ें.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

जब तक .my-element में auto के z-index के लिए शुरुआती वैल्यू मौजूद है, तब तक .child एलिमेंट इसके पीछे दिखेगा.

.my-element में, इस सीएसएस को जोड़ें, और इसके पीछे .child एलिमेंट नहीं रहेगा.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

क्योंकि .my-element की वैल्यू अब position है, जो static नहीं है और z-index वैल्यू, जो auto नहीं है, इसने एक नया स्टैकिंग कॉन्टेक्स्ट बनाया है. इसका मतलब है कि भले ही आप .child को -999 का z-index सेट करें, यह अब भी .my-parent के पीछे नहीं रहेगा.

स्टैकिंग कॉन्टेक्स्ट

स्टैकिंग कॉन्टेक्स्ट, एलिमेंट का ऐसा ग्रुप होता है जिनका एक जैसा पैरंट होता है. ये एलिमेंट z ऐक्सिस पर एक साथ ऊपर और नीचे मूव करते हैं.

इस उदाहरण में, पहले पैरंट एलिमेंट में, 1 का z-index है, इसलिए नया स्टैकिंग संदर्भ बनाता है. इसके चाइल्ड एलिमेंट में 999 का z-index है. इस पैरंट के बगल में, एक चाइल्ड एलिमेंट वाला दूसरा पैरंट एलिमेंट है. पैरंट की वैल्यू में 2 का z-index है और चाइल्ड एलिमेंट में भी 2 का z-index है. क्योंकि दोनों अभिभावक एक स्टैकिंग संदर्भ बनाते हैं, सभी बच्चों का z-index, उनके माता-पिता के हिसाब से तय होता है.

स्टैकिंग कॉन्टेक्स्ट में एलिमेंट का z-index हमेशा पैरंट के मौजूदा क्रम के हिसाब से होती हैं.

स्टैकिंग कॉन्टेक्स्ट बनाना

नया बनाने के लिए, आपको z-index और position को लागू करने की ज़रूरत नहीं है कॉन्टेक्स्ट को स्टैक करना. आप नई संयोजित लेयर बनाने वाली प्रॉपर्टी के लिए एक मान जोड़कर नया स्टैकिंग संदर्भ बना सकते हैं जैसे कि opacity, will-change, और transform. आप प्रॉपर्टी की पूरी सूची यहां देखें.

कंपोज़िट लेयर क्या है, यह समझाने के लिए, मान लें कि वेब पेज एक कैनवस है. ब्राउज़र आपका एचटीएमएल और सीएसएस लेता है और इनका इस्तेमाल यह तय करने के लिए करता है कि कैनवस कितना बड़ा बनाना है. इसके बाद, पेज को इस कैनवस पर पेंट कर दिया जाता है. अगर कोई एलिमेंट बदलना था, तो मान लें कि उसकी जगह बदल जाती है—इसके बाद ब्राउज़र को वापस जाकर पेंट करना होगा.

परफ़ॉर्मेंस बेहतर बनाने में मदद करने के लिए, ब्राउज़र नई कंपोज़िट लेयर बनाता है, जो कैनवस के ऊपर लेयर होती हैं. ये पोस्ट-इट नोट की तरह हैं: उसे इधर-उधर ले जाने और उसे बदलने से पूरे कैनवस पर कोई खास असर नहीं पड़ता. opacity वाले एलिमेंट के लिए एक नई कंपोज़िट लेयर बनाई जाती है, transform और will-change में बदलाव हो सकता है, क्योंकि ताकि ब्राउज़र यह पक्का करे कि स्टाइल अडजस्ट करने के लिए, जीपीयू का इस्तेमाल करके यह पक्का किया जा सके कि बदलाव बेहतर तरीके से किया जा सके.

संसाधन

• लेयर ज़बरदस्ती करना
• ऐनिमेशन गाइड: ज़बरदस्ती लेयर बनाएं
• z-index के बारे में समझना

देखें कि आपको कितना समझ आया है

Z-इंडेक्स के बारे में अपनी जानकारी की जांच करें

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>