CSS में एब्सोल्यूट पोजिशनिंग

एब्सोल्यूट पोजिशनिंग

एब्सोल्यूट पोजिशनिंग के साथ, एक एलिमेंट निकटतम पोजिशन्ड एन्सेस्टर के सापेक्ष पोजिशन होता है।

मुख्य बिंदु:

• नॉर्मल डॉक्यूमेंट फ्लो से बाहर निकाल दिया जाता है
• अन्य एलिमेंट्स इसके लिए स्पेस रिजर्व नहीं करते
• निकटतम ancestor जिसके पास position: relative/absolute/fixed/sticky हो, उसके सापेक्ष पोजिशन होता है
• यदि ऐसा कोई ancestor नहीं, तो initial containing block (व्यूपोर्ट) के सापेक्ष

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
  position: relative;
  color: white;
  background-color: orange;
  border: 2px dashed blue;
  width: 600px;
  height: 200px;
}
div.demo2 {
  position: absolute;
  color: white;
  background-color: orange;
  border: 2px dashed blue;
  top: 50px;
  right: 0;
  width: 300px;
  height: 100px;
}
</style>
</head>
<body>
<h2>डेमो हेडिंग</h2>
<p>यह डेमो टेक्स्ट है।</p>
<p>यह डेमो टेक्स्ट है।</p>
<p>यह डेमो टेक्स्ट है।</p>
<p>यह डेमो टेक्स्ट है।</p>
<div class="demo1">position: relative;
  <div class="demo2"> position: absolute; </div>
</div>
<p>यह एक और डेमो टेक्स्ट है।</p>
<p>यह डेमो टेक्स्ट है।</p>
<p>यह डेमो टेक्स्ट है।</p>
</body>
</html>

आउटपुट

बच्चा (demo2) पैरेंट (demo1) के अंदर top: 50px, right: 0 पर पोजिशन होगा। पैरेंट relative है इसलिए यह रेफरेंस पॉइंट बन जाता है।

पोजिशनिंग कॉन्टेक्स्ट स्थापित करना:

एब्सोल्यूट एलिमेंट के लिए रेफरेंस बनाने के लिए पैरेंट पर सेट करें:

• position: relative (सबसे आम - फ्लो में रहता है)
• position: absolute
• position: fixed
• position: sticky

सामान्य पैटर्न:

/* कार्ड पर बैज */
.card { position: relative; }
.badge { position: absolute; top: -10px; right: -10px; }

/* मॉडल सेंटरिंग */
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* टूलटिप */
.tooltip { position: relative; }
.tooltip::after {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
}

z-index नोट:

एब्सोल्यूट एलिमेंट्स नया स्टैकिंग कॉन्टेक्स्ट बनाते हैं। z-index केवल सिबलिंग्स या समान कॉन्टेक्स्ट में काम करता है।

सामान्य गलतियाँ:

• पैरेंट पर position भूल जाना → एलिमेंट व्यूपोर्ट के सापेक्ष पोजिशन होता है
• अनावश्यक रूप से उपयोग करना (फ्लेक्सबॉक्स/ग्रिड बेहतर हो सकता है)
• मोबाइल पर ओवरफ्लो समस्याएं