क्यासिंगिङ ओभरल्यापिंग तत्वहरू क्यासिंगिङ स्टाइल पानाहरूसँग
वेब पेज लेआउटको लागि CSS पोजिटिङ् प्रयोग गर्दा चुनौतीहरूमध्ये एउटा हो कि तपाइँका केही तत्वहरूले अरूलाई ओभरल्याप गर्न सक्छन्। यो राम्रो काम गर्दछ यदि तपाईं HTML मा अन्तिम तत्त्व चाहानुहुन्छ भने, तर के तपाई यदि नगर्नु हुन्छ वा के भने यदि तपाईले अरु तत्वहरू चाहानुहुन्छ वर्तमानमा अरूले यो गर्नका लागि ओभरल्याप गर्दैन किनकि यो "लेयर" लग रहेको डिजाइनलाई कल गर्दछ। ? मार्ग तत्व ओवरलैप परिवर्तन गर्न तपाईंलाई सीएसएसको सम्पत्ति प्रयोग गर्न आवश्यक छ।
यदि तपाईंले Word र PowerPoint वा अधिक शक्तिशाली छवि सम्पादकको एडोब फोटोशपमा ग्राफिक्स उपकरणहरू प्रयोग गर्नुभयो भने, त्यसका कारणले तपाइँले जे-सूचकांक जस्ता कार्यमा केहि देख्नुभएको छ। यी प्रोग्रामहरूमा, तपाईंले गरेको वस्तु (हरू) लाई हाइलाइट गर्न सक्नुहुन्छ र तपाईंको कागजातको "निश्चितमा पठाउनुहोस्" वा "अगाडि पठाउनुहोस्" को विकल्प छनौट गर्न सक्नुहुन्छ। फोटोशपमा, तपाइँसँग यी प्रकार्यहरू छैनन्, तर तपाइँसँग कार्यक्रमको "परत" फलक छ र तपाईँले ती तहहरू पुन: पुनरावृत्ति गरेर एक तत्व क्यानवासमा आइपर्छ कसरी प्रबन्ध गर्न सक्नुहुन्छ। यी दुवै उदाहरणहरूमा, तपाईंले अनिवार्य रूपले ती वस्तुहरूको z-index लाई सेट गर्दै हुनुहुन्छ।
Z-index के हो?
जब तपाईं पृष्ठको तत्वहरू राख्नको लागि सीएसएस पोजिशनिंग प्रयोग गर्दै हुनुहुन्छ भने, तपाइँलाई तीन आयामहरूमा विचार गर्न आवश्यक छ। त्यहाँ दुई मानक आयामहरू छन्: बाँया / दाँया र माथिल्लो / तल। बाँयाबाट दायाँ सूचकांक x-index को रूपमा चिनिन्छ, जबकि माथिबाट तल एक y-index हो। यो तपाइँ यी दुई अनुक्रमणिकाहरू प्रयोग गरेर कसरी क्षैतिज रूपमा ठाडो रूपमा ठाडो स्थितिमा राख्नुहुन्छ।
जब वेब डिजाइनमा आउँदछ, त्यहाँ पृष्ठको स्ट्याकिङ अर्डर पनि छ। पृष्ठमा प्रत्येक तत्व अन्य तत्व माथि माथि वा तल तहमा राख्न सकिन्छ। Z-index गुणले प्रत्येक तत्व हो स्ट्याकमा निर्धारण गर्छ। यदि x-index र y-index हङ्कको र ठाडो रेखा हुन्, त्यसपछि z-index पृष्ठको गहिराइ हो, अनिवार्य रूपमा तेस्रो आयाम।
म वेबपृष्ठमा तत्वहरूको कागजको टुक्राको रूपमा सोच्न चाहन्छु, र वेब पृष्ठ आफैं एक महाविद्यालयको रूपमा। जहाँ म पेपर पोजीटिङ् द्वारा निर्धारण गरिन्छ, र अन्य तत्वहरू द्वारा कभरको यो कर्जा z-index छ।
Z-index एक संख्या हो, या तो सकारात्मक (जस्तै 100) वा नकारात्मक (जस्तै -100)। पूर्वनिर्धारित z-index। 0. उच्चतम z-index सँगको तत्व शीर्षमा छ, पछि अर्को उच्च र यसमा तल निम्न z-index मा। यदि दुई तत्त्वहरूसँग समान z-index अनुक्रमणिका छ (वा यो परिभाषित गरिएको छैन, 0 को प्रयोगको पूर्वनिर्धारित मान भनेको ब्राउजरले तिनीहरूलाई HTML मा देखा पर्दछ)।
Z-index कसरी प्रयोग गर्ने
तपाईंको स्ट्याकमा एक फरक z-सूचकांक मूल्य चाहानुहुन्छ जुन तपाइँलाई चाहानुहुन्छ। उदाहरणका लागि, यदि मेरो पाँचवटा मुख्य तत्वहरू छन्:
- तत्व 1 - z-सूचकांक -25 को
- तत्व 2-z-82 को सूचकांक
- तत्व 3 - z-अनुक्रमणिका सेट गरिएको छैन
- तत्व 4 - z-10 को सूचकांक
- तत्व 5 - z-सूचकांक -3
तिनीहरू निम्न क्रममा स्टक हुनेछन्:
- तत्व 2
- तत्व 4
- तत्व 3
- तत्व 5
- तत्व 1
म तपाईंका तत्वहरूलाई स्ट्याक गर्न धेरै अलग-ए-सूचकांक मानहरू प्रयोग गर्न सिफारिस गर्दछु। त्यस तरिकाले, यदि तपाइँ पछि पृष्ठमा थप तत्वहरू थप्नुहुन्छ, तपाइँसँग अन्य सबै तत्वहरूको z-index मानहरू समायोजन बिना तिनीहरूलाई तह गर्न कोठा छ। उदाहरणका लागि:
- 100 मेरो शीर्ष-अधिक तत्वको लागि
- 0 मेरो मध्य तत्वको लागि
- -100 मेरो तलको तत्वको लागि
तपाईं दुई तत्व पनि z-index मान मान गर्न सक्नुहुन्छ। यदि यी तत्वहरू स्ट्याक गरिएको छ भने, तिनीहरू क्रममा प्रदर्शित हुनेछ जुन HTML मा लेखिएको छ, माथिको अन्तिम तत्वको साथ।
एक नोट, एक तत्व को लागि प्रभावी रूपमा z-index property को प्रयोग गर्न को लागि, यो एक ब्लक स्तर तत्व हुनु पर्छ वा तपाईंको सीएसएस फाइलमा "ब्लक" वा "इनलाइन-ब्लक" को प्रदर्शन प्रयोग गर्नुहोस्।
जेनिफर क्रिनिन द्वारा मूल लेख। 12/09/16 मा जेरेमी गिरर्ड द्वारा सम्पादन।