position नियंत्रित करता है कि कोई तत्व कैसे रखा जाता है और क्या offset गुण (top/right/bottom/left) लागू होते हैं।
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute किसी तत्व को अपने निकटतम स्थिति वाले पूर्वज (static को छोड़कर कुछ भी) के सापेक्ष रखता है। तो आप इसे संदर्भ बिंदु बनाने के लिए माता-पिता पर position: relative सेट करते हैं:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
यह relative-parent / absolute-child पैटर्न हर जगह है: badges, dropdowns, tooltips, close बटन।
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) तक न पहुंचे तब तक relative के रूप में कार्य करता है, फिर जब तक इसका कंटेनर दृश्य में है तब तक वहीं रहता है — खंड शीर्षलेखों के लिए बहुत अच्छा।absolute/fixed तत्व सामान्य प्रवाह से हटा दिए जाते हैं, इसलिए वे जगह आरक्षित नहीं करते — भाई-बहनें ऐसे कार्य करते हैं जैसे वे वहां नहीं हैं, जो overlap का कारण बन सकता है। इसकी योजना बनाएं (उदाहरण के लिए, fixed navbar के लिए padding जोड़ें)।
position overlays, sticky headers, modals, dropdowns और badges के लिए आवश्यक है।
Relative-parent/absolute-child संबंध और fixed-vs-sticky अंतर व्यावहारिक मूल्य हैं जिनका आप लगातार उपयोग करते हैं।