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

Question

मुझे पता है कि पूर्ण & सापेक्ष स्थिति क्या है लेकिन कुछ बिंदु अभी भी मुझे साफ़ नहीं किए गए हैं। संदर्भ के लिए

सीएसएस:

.rel{ 
    position:relative; 
    background:red; 
} 
.abs{ 
    position:absolute; 
    background:blue; 
} 

एचटीएमएल:

<div class="rel">rel</div> 
<div class="abs">abs</div> 

अब

बिंदु हैं:

• रिश्तेदार div 100% चौड़ाई स्वचालित रूप से लेता है लेकिन पूर्ण div केवल सामग्री की चौड़ाई लेता है । क्यूं कर?

• जब मैं ऊंचाई 100% देता हूं तो सापेक्ष div में कोई प्रभाव नहीं पड़ता है लेकिन पूर्ण div 100% ऊंचाई लेता है। क्यूं कर?

• जब मैं मार्जिन-टॉप देता हूं: 30px यह शिफ्ट पूर्ण div भी है, लेकिन जब मैं शीर्ष देता हूं: 30px तो केवल सापेक्ष div shift। क्यूं कर?

• जब मैं पूर्ण div में top:0 , left:0 नहीं देता तो यह div ऊंचाई से ऊपर ले जाता है। क्यूं कर?

Answer 1

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

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

3. शायद यह आपके HTML में मूल तत्वों के साथ कुछ करने के लिए है, लेकिन जब तक आप अपने पृष्ठ का पूरा HTML और CSS प्रदान नहीं करते हैं तब तक मैं और सहायता नहीं कर सकता।

4. शीर्ष और बाएं गुणों का डिफ़ॉल्ट मान स्वतः है। इसका अर्थ यह है कि ब्राउजर आपके लिए इन सेटिंग्स की गणना करेगा और उन्हें position:absolute नहीं होने पर तत्व को प्रस्तुत किया जाएगा।