सीएसएस पॉडकास्ट - 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>
डिफ़ॉल्ट रूप से, कौनसा लेख सबसे ऊपर रखा जाता है?
अगर z-index काम नहीं कर रहा है, तो आपको अपने एलिमेंट पर किस प्रॉपर्टी की जांच करनी चाहिए?
display
relative
position
static
के बजाय किसी और पर सेट हो.animation
क्या फ़्लेक्सबॉक्स और ग्रिड को position: relative
की ज़रूरत है?
position: relative
के बिना काम होगा.