Z-सूचकांक और छद्म-तत्व: एक केस अध्ययन

सीएसएस में, z-सूचकांक संपत्ति तत्वों के स्टैकिंग क्रम को निर्दिष्ट करती है एक पृष्ठ, यह निर्धारित करता है कि कौन से तत्व दूसरों के "सामने" या "पीछे" दिखाई देते हैं। हालाँकि, जब छद्म तत्वों की बात आती है, जैसे ::before या ::after, तो z-index के साथ उनकी बातचीत कभी-कभी सीधी से कम हो सकती है।

एक परिदृश्य पर विचार करें जहां हम एक हेडर तत्व बनाते हैं ::छद्म तत्व से पहले, जैसा कि समस्या कथन में वर्णित है। हम छद्म तत्व को हेडर तत्व के पीछे रखने का इरादा रखते हैं, लेकिन जब हम हेडर पर z-इंडेक्स लागू करते हैं, तो छद्म तत्व अप्रत्याशित रूप से अग्रभूमि में आ जाता है।

स्पष्टीकरण छद्म की प्रकृति में निहित है- तत्व स्वयं. जैसा कि सीएसएस विनिर्देश में कहा गया है, ::पहले और ::छद्म तत्वों के बाद "अन्य बक्सों के साथ इस तरह से बातचीत करते हैं जैसे कि वे वास्तविक तत्व थे जो उनके संबंधित तत्व के ठीक अंदर डाले गए थे।" इसका मतलब यह है कि छद्म तत्व प्रभावी रूप से मूल तत्व के भीतर निहित है।

जब हम हेडर तत्व पर z-इंडेक्स लागू करते हैं, तो यह एक नया स्टैकिंग संदर्भ बनाता है। स्टैकिंग संदर्भ एक 3D स्थान है जहां तत्वों को उनके z-इंडेक्स मानों के क्रम में प्रस्तुत किया जाता है। एक ही स्टैकिंग संदर्भ में तत्व एक दूसरे को ओवरलैप नहीं कर सकते।

इस मामले में, छद्म तत्व को हेडर तत्व के समान स्टैकिंग संदर्भ में स्थित किया गया है। चूँकि इसे एक नेस्टेड तत्व माना जाता है, यह हेडर के पीछे तैर नहीं सकता क्योंकि इसके लिए इसे स्टैकिंग संदर्भ से बचना होगा।

इस समस्या को हल करने के लिए, एक समाधान हेडर से पहले एक अलग तत्व बनाना है, जैसा कि सुझाव दिया गया है उत्तर में. यह तत्व हेडर और छद्म-तत्व के लिए एक कंटेनर के रूप में कार्य करेगा, और इसका z-इंडेक्स हेडर को सामने सही ढंग से स्टैक करेगा।