CSS में एलिमेंट्स की रिलेटिव पोजीशनिंग

रिलेटिव पोजीशनिंग प्रॉपर्टी position के वैल्यू relative के साथ सेट की जाती है। ऐसी पोजीशनिंग एलिमेंट्स को उनकी वर्तमान स्थिति से एक निर्धारित मात्रा में स्थानांतरित करने की अनुमति देती है। इसके साथ ही पेज के अन्य सभी एलिमेंट्स यही सोचेंगे, कि एलिमेंट वहीं खड़ा है जहां यह मूल रूप से खड़ा था। यानी इस प्रकार की पोजीशनिंग में एलिमेंट नॉर्मल फ्लो से बाहर नहीं निकलता है।

वर्तमान स्थिति से ऑफसेट प्रॉपर्टीज top, right, bottom और left द्वारा सेट किए जाते हैं।

उदाहरण

सबसे पहले, आइए बिना किसी पोजीशनिंग के दो ब्लॉक बनाएं:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

उदाहरण

अब पहले ब्लॉक को relative जोड़ते हैं। इससे अभी तक कुछ भी नहीं बदलेगा, क्योंकि हमने ब्लॉक का ऑफसेट निर्दिष्ट नहीं किया है:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

उदाहरण

आइए अब हम अपने ब्लॉक को ऊपर से 30px हटाकर, इसे प्रॉपर्टी top देते हैं। इस के साथ ही अन्य सभी एलिमेंट्स ऐसा व्यवहार करेंगे जैसे कि हमारा ब्लॉक उसी जगह पर बना हुआ है जहां यह मूल रूप से था:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

उदाहरण

आइए अपने ब्लॉक को बाएं से 40px भी हटाएं, इसे प्रॉपर्टी left देकर:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

उदाहरण

प्रॉपर्टीज top, right, bottom और left के नेगेटिव वैल्यू विपरीत दिशा में शिफ्ट करते हैं। उदाहरण के लिए, top का पॉजिटिव वैल्यू नीचे की ओर शिफ्ट करता है, और नेगेटिव - ऊपर की ओर।

आइए अपने दूसरे ब्लॉक को 40px ऊपर की ओर शिफ्ट करें, इसे top प्रॉपर्टी का नेगेटिव वैल्यू देकर:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

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

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}