एब्सोल्यूट बनाम रिलेटिव पोजिशनिंग: डाइमेंशन और प्लेसमेंट में गहराई से जाना

वेब डिज़ाइन में, एब्सोल्यूट और रिलेटिव पोजिशनिंग की अवधारणाओं को समझना महत्वपूर्ण है। जबकि दोनों तकनीकें सटीक तत्व प्लेसमेंट की अनुमति देती हैं, वे चौड़ाई, ऊंचाई और स्थिति के संदर्भ में अलग-अलग व्यवहार प्रदर्शित करती हैं।

1. चौड़ाई में अंतर

स्थिति:सापेक्ष वाला एक तत्व स्वचालित रूप से अपने कंटेनर की चौड़ाई का 100% ले लेता है, जो दस्तावेज़ की सामग्री के साथ प्रभावी ढंग से प्रवाहित होता है। इसके विपरीत, स्थिति:निरपेक्ष वाला एक तत्व अलग तरह से व्यवहार करता है, केवल अपनी सामग्री की चौड़ाई पर कब्जा करता है। यह दस्तावेज़ के सामान्य प्रवाह से हटाए जाने का परिणाम है। पूर्ण रूप से स्थित तत्व के लिए पूर्ण-चौड़ाई प्रभाव प्राप्त करने के लिए, आपको इसकी चौड़ाई को स्पष्ट रूप से 100% पर सेट करना होगा।

2. ऊंचाई संबंधी विचार

जब आप स्थिति:सापेक्ष वाले किसी तत्व को ऊंचाई:100% निर्दिष्ट करते हैं, तो इसका कोई प्रभाव नहीं पड़ता है जब तक कि उसके कंटेनर की परिभाषित ऊंचाई न हो। ऐसा इसलिए है क्योंकि यह सामग्री के सामान्य प्रवाह का पालन करता है। दूसरी ओर, पूर्ण स्थिति वाले तत्व उनके कंटेनरों द्वारा प्रतिबंधित नहीं होते हैं, इसलिए उनकी ऊंचाई 100% निर्धारित करने से उन्हें अपने कंटेनर की पूरी ऊंचाई प्राप्त हो जाएगी।

3. मार्जिन और पैडिंग प्रभाव

मार्जिन और पैडिंग का पूर्ण और सापेक्ष स्थिति वाले तत्वों पर अलग-अलग प्रभाव पड़ता है। उदाहरण के लिए, यदि आप किसी पूर्ण स्थिति वाले तत्व पर मार्जिन-टॉप: 30px लागू करते हैं, तो यह तत्व को नीचे की ओर स्थानांतरित कर देगा। हालाँकि, यदि आप शीर्ष: 30px का उपयोग करते हैं, तो यह इसके बजाय सापेक्ष स्थिति वाले तत्व को प्रभावित करेगा। यह व्यवहार दस्तावेज़ प्रवाह के भीतर इन तत्वों की स्थिति के विभिन्न तरीकों से उत्पन्न होता है।

4. डिफ़ॉल्ट शीर्ष और बाएँ स्थितियाँ

जब पूर्ण रूप से स्थित तत्व के लिए कोई स्पष्ट शीर्ष या बाएँ गुण निर्दिष्ट नहीं होते हैं, तो यह ऑटो के मानों पर डिफ़ॉल्ट होता है। ब्राउज़र इन स्थितियों की गणना इस आधार पर करता है कि सामग्री के सामान्य प्रवाह में तत्व कहाँ दिखाई देगा। शीर्ष और बाएँ गुणों को 0 पर सेट करके, आप यह सुनिश्चित कर सकते हैं कि पूर्ण स्थिति वाला तत्व उसके युक्त तत्व के ऊपरी बाएँ कोने पर रखा गया है।