पूर्ण बनाम सापेक्ष स्थिति को समझना: चौड़ाई, ऊंचाई, और अधिक

वेब पेज पर स्थिति तत्वों से निपटते समय, अवधारणाओं को समझना निरपेक्ष बनाम सापेक्ष स्थिति महत्वपूर्ण है। आइए चार प्रमुख बिंदुओं पर गौर करें जिन पर अक्सर सवाल उठते हैं:

1. सापेक्ष बनाम निरपेक्ष चौड़ाई

एक अपेक्षाकृत स्थित div स्वचालित रूप से 100% चौड़ाई क्यों लेता है, जबकि एक बिल्कुल स्थित div केवल सामग्री चौड़ाई लेता है?

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

2। ऊंचाई और सापेक्ष स्थिति

ऊंचाई को 100% पर सेट करने से अपेक्षाकृत स्थित div पर कोई प्रभाव क्यों नहीं पड़ता है, लेकिन बिल्कुल स्थित div 100% ऊंचाई लेता है?

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

3. मार्जिन-टॉप और शिफ्टिंग

मार्जिन-टॉप:30पीएक्स बिल्कुल स्थित डिव को क्यों शिफ्ट करता है, लेकिन टॉप:30पीएक्स का उपयोग करने पर केवल अपेक्षाकृत स्थित डिव शिफ्ट होता है?

यह संभव है आपकी HTML संरचना में मूल तत्वों से संबंधित। पूर्ण HTML और CSS कोड प्रदान किए बिना, सटीक कारण बताना मुश्किल है।

4। शीर्ष और बाएँ के बिना पूर्ण स्थिति

यदि आप बिल्कुल स्थित div के लिए शीर्ष:0 और बाएँ:0 निर्दिष्ट नहीं करते हैं, तो यह div से पहले इसके ऊपर का स्थान क्यों लेता है?

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