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