position प्रॉपर्टी

position प्रॉपर्टी एलिमेंट्स की पोजीशनिंग का तरीका निर्धारित करती है। यह प्रॉपर्टी अक्सर top, right, bottom, left, प्रॉपर्टीज के साथ संयोजन में उपयोग की जाती है, जो क्रमशः ऊपर, दाएं, नीचे, बाएं से दूरी सेट करती हैं।

सिंटैक्स

cssसिलेक्टर {
  position: absolute | relative | fixed | static | sticky;
}

position के लिए वैल्यूज

डिफॉल्ट वैल्यू: static।

उदाहरण . एब्सोल्यूट पोजीशनिंग

एलिमेंट को स्क्रीन के ऊपरी बाएं कोने में थोड़े मार्जिन के साथ रखें:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

उदाहरण . एब्सोल्यूट पोजीशनिंग

अब एलिमेंट को स्क्रीन के ऊपरी दाएं कोने में थोड़े मार्जिन के साथ रखें:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

उदाहरण . फिक्स्ड पोजीशनिंग

फिक्स्ड पोजीशनिंग में एलिमेंट स्क्रॉल करते समय भी अपनी जगह पर रहेगा:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

उदाहरण . रिलेटिव पोजीशनिंग

रिलेटिव पोजीशनिंग में एलिमेंट अपनी सामान्य स्थिति के सापेक्ष स्थानांतरित हो जाता है, लेकिन अन्य एलिमेंट्स ऐसे व्यवहार करते हैं, जैसे कि एलिमेंट स्थानांतरित नहीं हुआ था:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

उदाहरण . नेस्टिंग

अगर पैरेंट की position प्रॉपर्टी की वैल्यू relative है, तो एब्सोल्यूटली पोजीशन किए गए एलिमेंट्स पैरेंट के सापेक्ष पोजीशन किए जाएंगे:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

उदाहरण . नेस्टिंग

अगर पैरेंट की position प्रॉपर्टी की वैल्यू absolute है, तो एब्सोल्यूटली पोजीशन किए गए एलिमेंट्स पैरेंट के सापेक्ष पोजीशन किए जाएंगे:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

उदाहरण . स्टिकी पोजीशनिंग

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

html<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

उदाहरण . बिना पोजीशन के

अगर किसी एलिमेंट को पोजीशन निर्दिष्ट किए बिना एब्सोल्यूट पोजीशनिंग दी जाए, तो एलिमेंट उसी जगह रहेगा, जहां वह बिना पोजीशनिंग के था, लेकिन अन्य एलिमेंट्स उसे नोटिस करना बंद कर देंगे:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

उदाहरण . एक अक्ष

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

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

उदाहरण . सभी पोजीशन

एब्सोल्यूट पोजीशनिंग में चौड़ाई और ऊंचाई सेट किए बिना सभी तरफ से पोजीशन सेट की जा सकती है। इस स्थिति में एलिमेंट पैरेंट ब्लॉक के केंद्र में आ जाएगा:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

यह भी देखें