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

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

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

<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-इंडेक्स के बारे में अपनी जानकारी की जांच करें

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

डिफ़ॉल्ट रूप से, कौनसा लेख सबसे ऊपर रखा जाता है?

1
यह सबसे पीछे की ओर होता है.
2
फिर से कोशिश करें!
3
फिर से कोशिश करें!
4
दस्तावेज़ का आखिरी हिस्सा सबसे ऊपर आता है, हां!

अगर z-index काम नहीं कर रहा है, तो आपको अपने एलिमेंट पर किस प्रॉपर्टी की जांच करनी चाहिए?

display
इस बात की संभावना कम है कि z-इंडेक्स काम क्यों नहीं कर रहा है.
relative
यह एक सीएसएस वैल्यू है, न कि प्रॉपर्टी.
position
पक्का करें कि यह static के बजाय किसी और पर सेट हो.
animation
इस बात की संभावना कम है कि z-इंडेक्स काम क्यों नहीं कर रहा है.

क्या फ़्लेक्सबॉक्स और ग्रिड को position: relative की ज़रूरत है?

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