कैस्केडिंग स्टाइल शीट्स के साथ पोजिशनिंग ओवरलैपिंग एलिमेंट्स
वेब पेज लेआउट के लिए सीएसएस पोजिशनिंग का उपयोग करते समय चुनौतियों में से एक यह है कि आपके कुछ तत्व दूसरों को ओवरलैप कर सकते हैं। यह ठीक काम करता है अगर आप एचटीएमएल में अंतिम तत्व शीर्ष पर होना चाहते हैं, लेकिन क्या होगा यदि आप ऐसा नहीं करते हैं या नहीं, यदि आप ऐसे तत्व रखना चाहते हैं जो वर्तमान में दूसरों को ऐसा करने के लिए ओवरलैप न करें क्योंकि डिज़ाइन इस "स्तरित" रूप के लिए कॉल करता है ? तत्वों को ओवरलैप करने के तरीके को बदलने के लिए आपको सीएसएस की संपत्ति का उपयोग करने की आवश्यकता है।
यदि आपने Word और PowerPoint या Adobe Photoshop जैसे अधिक मजबूत छवि संपादक में ग्राफिक्स टूल का उपयोग किया है, तो संभावना है कि आपने ज़ेड-इंडेक्स में कार्रवाई की तरह कुछ देखा है। इन कार्यक्रमों में, आप जिस ऑब्जेक्ट को खींचा है उसे हाइलाइट कर सकते हैं, और अपने दस्तावेज़ के कुछ तत्वों को "वापस भेजने के लिए" या "सामने लाएं" विकल्प चुन सकते हैं। फ़ोटोशॉप में, आपके पास इन फ़ंक्शंस नहीं हैं, लेकिन आपके पास प्रोग्राम का "लेयर" फलक है और आप इन परतों को पुन: व्यवस्थित करके कैनवास में कोई तत्व कहां से व्यवस्थित कर सकते हैं। इन दोनों उदाहरणों में, आप अनिवार्य रूप से उन वस्तुओं की जेड-इंडेक्स सेट कर रहे हैं।
जेड इंडेक्स क्या है?
जब आप पृष्ठ पर तत्वों की स्थिति के लिए सीएसएस पोजिशनिंग का उपयोग कर रहे हैं, तो आपको तीन आयामों में सोचने की आवश्यकता है। दो मानक आयाम हैं: बाएं / दाएं और ऊपर / नीचे। बाएं से दाएं इंडेक्स को एक्स-इंडेक्स के रूप में जाना जाता है, जबकि ऊपर से नीचे एक वाई-इंडेक्स है। इन दो इंडेक्स का उपयोग करके आप क्षैतिज या लंबवत तत्वों को स्थितिबद्ध करेंगे।
जब वेब डिज़ाइन की बात आती है, तो पेज के स्टैकिंग ऑर्डर भी होते हैं। पृष्ठ पर प्रत्येक तत्व किसी भी अन्य तत्व के ऊपर या नीचे स्तरित किया जा सकता है। जेड-इंडेक्स प्रॉपर्टी निर्धारित करती है कि प्रत्येक तत्व स्टैक में कहां है। यदि एक्स-इंडेक्स और वाई-इंडेक्स क्षैतिज और लंबवत रेखाएं हैं, तो जेड-इंडेक्स पृष्ठ की गहराई है, अनिवार्य रूप से तीसरा आयाम।
मुझे वेबपृष्ठ पर तत्वों को कागज के टुकड़ों के रूप में, और वेब पेज को कोलाज के रूप में सोचना पसंद है। जहां मैं पेपर रखता हूं उसे पोजीशनिंग द्वारा निर्धारित किया जाता है, और इसमें से कितना अन्य तत्वों द्वारा कवर किया जाता है वह जेड-इंडेक्स है।
जेड-इंडेक्स एक संख्या है, या तो सकारात्मक (उदाहरण के लिए 100) या नकारात्मक (उदाहरण -100)। डिफ़ॉल्ट जेड-इंडेक्स 0 है। उच्चतम जेड-इंडेक्स वाला तत्व शीर्ष पर है, इसके बाद अगले उच्चतम और निम्नतम जेड-इंडेक्स पर नीचे है। यदि दो तत्वों में एक ही जेड-इंडेक्स मान है (या यह परिभाषित नहीं किया गया है, जिसका अर्थ है कि 0 का डिफ़ॉल्ट मान उपयोग करें) ब्राउज़र उन्हें HTML में दिखाई देने वाले क्रम में ले जाएगा।
जेड-इंडेक्स का उपयोग कैसे करें
अपने स्टैक में इच्छित प्रत्येक तत्व को एक अलग जेड-इंडेक्स मान दें। उदाहरण के लिए, यदि मेरे पास पांच अलग-अलग तत्व हैं:
- तत्व 1 - -25 की जेड-इंडेक्स
- तत्व 2 - 82 की जेड-इंडेक्स
- तत्व 3 - जेड-इंडेक्स सेट नहीं है
- तत्व 4 - 10 की जेड-इंडेक्स
- तत्व 5 - -3 की जेड-इंडेक्स
वे निम्नलिखित क्रम में ढेर होंगे:
- तत्व 2
- तत्व 4
- तत्व 3
- तत्व 5
- तत्व 1
मैं आपके तत्वों को ढेर करने के लिए बहुत अलग जेड-इंडेक्स मानों का उपयोग करने की सलाह देता हूं। इस तरह, यदि आप बाद में पृष्ठ पर अधिक तत्व जोड़ते हैं, तो आपके पास अन्य सभी तत्वों के जेड-इंडेक्स मानों को समायोजित किए बिना उन्हें परत करने के लिए कक्ष है। उदाहरण के लिए:
- मेरे शीर्ष-सबसे तत्व के लिए 100
- मेरे मध्य तत्व के लिए 0
- -100 मेरे नीचे तत्व के लिए
आप दो तत्वों को एक ही जेड-इंडेक्स मान भी दे सकते हैं। यदि इन तत्वों को ढेर किया गया है, तो वे शीर्ष पर अंतिम तत्व के साथ HTML में लिखे गए क्रम में प्रदर्शित होंगे।
एक नोट, जेड-इंडेक्स प्रॉपर्टी का प्रभावी ढंग से उपयोग करने के लिए एक तत्व के लिए, यह एक ब्लॉक स्तर तत्व होना चाहिए या अपनी सीएसएस फ़ाइल में "ब्लॉक" या "इनलाइन-ब्लॉक" के प्रदर्शन का उपयोग करना चाहिए।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 12/09/16 को संपादित किया गया।