position प्रॉपर्टी

पाँच मान

static डिफ़ॉल्ट फ्लो। relative अपनी सामान्य जगह से हटता है, जगह फिर भी आरक्षित रहती है। absolute फ्लो से हटता है, निकटतम पोज़िशन्ड पूर्वज के सापेक्ष रखा जाता है। fixed व्यूपोर्ट के सापेक्ष। sticky स्क्रॉल पर relative और fixed के बीच बदलता है।

relative के अंदर absolute

क्लासिक पैटर्न: relative पेरेंट, absolute चाइल्ड को एक संदर्भ बॉक्स देता है।

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

sticky की व्याख्या

top: 0 के साथ position: sticky सामान्य रहता है जब तक स्क्रॉल स्थिति सीमा तक न पहुँचे, फिर यह "चिपक" जाता है — सेक्शन हेडर और टेबल हेडर के लिए बढ़िया।

त्वरित जाँच: `absolute` एलिमेंट किसके सापेक्ष रखा जाता है?

• हमेशा व्यूपोर्ट के सापेक्ष
• अपने निकटतम पोज़िशन्ड पूर्वज के सापेक्ष
• अपने तुरंत सिबलिंग के सापेक्ष
• केवल document body