सीएसएस में पैरेंट के सापेक्ष पोजिशनिंग

यदि किसी एलिमेंट को relative दिया गया है, और उसके चाइल्ड एलिमेंट को - absolute, तो यह चाइल्ड एलिमेंट ब्राउज़र विंडो के सापेक्ष नहीं, बल्कि अपने पैरेंट के सापेक्ष पोजिशन होगा।

आमतौर पर, इस स्थिति में पैरेंट को बिना ऑफसेट के relative निर्दिष्ट किया जाता है। इस स्थिति में इस पैरेंट के साथ कुछ नहीं होता, लेकिन इसके सभी चाइल्ड एलिमेंट अब इसके सापेक्ष पोजिशन होंगे।

आइए उदाहरणों पर नजर डालें।

उदाहरण

सबसे पहले, आइए बिना किसी पोजिशनिंग के एक पैरेंट ब्लॉक और एक चाइल्ड ब्लॉक बनाएं:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

उदाहरण

आइए अब हरे ब्लॉक को एब्सोल्यूटली पोजिशन करें। चूंकि पैरेंट को relative निर्दिष्ट नहीं किया गया है, तो चाइल्ड एलिमेंट ब्राउज़र विंडो के सापेक्ष पोजिशन होगा:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

उदाहरण

आइए अब पैरेंट को relative निर्दिष्ट करें। इस स्थिति में चाइल्ड एलिमेंट अपने पैरेंट के सापेक्ष पोजिशन होगा:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

प्रैक्टिकल टास्क

निम्नलिखित टास्क में मुख्य ब्लॉक auto मान के साथ margin का उपयोग करके केंद्र में है, और बाकी position प्रॉपर्टी का उपयोग करके इसके सापेक्ष पोजिशन होते हैं।