मुझे निरपेक्ष और सापेक्ष स्थिति का उपयोग कब करना चाहिए? [डुप्लिकेट] - सीएसएस, वेब, स्थिति, पूर्ण, रिश्तेदार

मैंने निरपेक्ष और सापेक्ष स्थिति के बारे में बहुत कुछ पढ़ा है, लेकिन अभी भी इसे ठीक से नहीं समझा जा सकता है। निरपेक्ष और सापेक्ष स्थिति का व्यावहारिक उपयोग क्या है और मुझे उनका उपयोग कब करना चाहिए?

उत्तर:

निरपेक्ष: तत्व अपने पहले तैनात (स्थिर नहीं) पूर्वज तत्व के सापेक्ष स्थित होता है

सापेक्ष: तत्व अपनी सामान्य स्थिति के सापेक्ष स्थित होता है

यह ब्राउज़र को बताता है कि जो कुछ भी हो रहा हैतैनात होने को दस्तावेज़ के सामान्य प्रवाह से हटा दिया जाना चाहिए और इसे पृष्ठ पर सटीक स्थान पर रखा जाएगा। इसे दस्तावेज़ के सामान्य प्रवाह से भी निकाल लिया जाता है - यह "प्रभावित करता है कि HTML से पहले या उसके बाद के तत्व वेब पेज पर कैसे स्थित हैं।

यदि आप डॉक्यूमेंट विंडो के ऊपर से किसी तत्व को १० से ऊपर रखना चाहते हैं, तो आप "टॉप" ऑफ़सेट का उपयोग इसे पूर्ण स्थिति में करने के लिए करेंगे:

 position: absolute;
top: 10em;

यह तत्व तब पृष्ठ के शीर्ष से हमेशा 10em प्रदर्शित करेगा - सामान्य प्रवाह में कोई अन्य चीज़ वहां प्रदर्शित नहीं होती है।

सापेक्ष स्थिति उसी चार का उपयोग करती हैपूर्ण स्थिति के रूप में स्थिति गुण। लेकिन ब्राउज़र दृश्य पोर्ट पर तत्व की स्थिति को आधार बनाने के बजाय, यह शुरू होता है जहां से तत्व तब होगा जब यह सामान्य प्रवाह में था।

उदाहरण के लिए, यदि आपके पास तीन पैराग्राफ हैंवेब पेज, और तीसरे में एक स्थिति है: रिश्तेदार शैली उस पर रखी गई है, यह स्थिति उस स्थान के आधार पर ऑफसेट होगी - वर्तमान स्थान - दृश्य पोर्ट के मूल पक्षों से नहीं।

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>

उपरोक्त उदाहरण में, तीसरा पैराग्राफ होगाकंटेनर तत्व के बाईं ओर से 3em तैनात है, लेकिन अभी भी पहले दो पैराग्राफ से नीचे होगा। यह दस्तावेज़ के सामान्य प्रवाह में बना रहेगा, और बस थोड़ा सा ऑफसेट होगा। यदि आपने इसे स्थिति में बदल दिया है: निरपेक्ष; निम्नलिखित में से कुछ भी इसके ऊपर प्रदर्शित होगा, क्योंकि यह अब दस्तावेज़ के सामान्य प्रवाह में नहीं होगा।