CSS Position
फ्लो पाठों ने बॉक्स को बताया कि लाइन में कैसे जुड़ें। position एक अलग सवाल पूछता है: यह बॉक्स अपनी सामान्य जगह, पूर्वज, या स्क्रीन के सापेक्ष कहाँ बैठे? स्टैकिंग या float ट्रिक्स से पहले पाँच रोज़मर्रा मान सीख लें।
एक position टूलकिट
📊 Position एक नज़र में
| मान | रोज़ का काम |
|---|---|
static |
डिफ़ॉल्ट — top/left जैसे offsets आमतौर पर बेकार |
relative |
सामान्य जगह से थोड़ा हिलता है; जगह रखता है; absolute बच्चों को एंकर कर सकता है |
absolute |
सामान्य फ्लो से बाहर; निकटतम position वाले पूर्वज के सापेक्ष |
fixed |
फ्लो से बाहर; स्क्रॉल करते हुए viewport पर पिन |
sticky |
थ्रेशहोल्ड तक relative जैसा, फिर कंटेनर में चिपकता है |
Offsets top, right, bottom, और left तभी मायने रखते हैं जब position static न हो। पहले मोड चुनें, फिर offset ठीक करें।
Relative — विनम्र झटका
relative तत्व को फ्लो में रखता है। मूल जगह आरक्षित रहती है। छोटे offsets ऑप्टिकल ट्वीक के लिए अच्छे हैं — और उस पैरेंट को चिह्नित करने के लिए जिसका absolute बच्चे पालन करें।
.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}
Absolute — फ्लो छोड़ो
absolute बॉक्स को सामान्य फ्लो से बाहर खींचता है। पड़ोसी गैप बंद कर देते हैं। प्लेसमेंट निकटतम पूर्वज पर निर्भर करता है जिसका position static न हो — अक्सर relative पैरेंट। बिना एंकर के तत्व बड़े containing block तक चढ़ सकता है।
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}
Absolute को घर दो
Absolute बच्चों को जानबूझकर चुने पैरेंट से जोड़ें। क्लास से संबंध नाम दें ताकि लेआउट पढ़ने योग्य रहे।
.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}
.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
Fixed — viewport से चिपकना
fixed तत्व को स्क्रीन पर पिन करता है। पेज स्क्रॉल करने से वह नहीं हिलता। शांत नोटिस या टूलबार के लिए उपयोग करें — हर कॉलम लेआउट का शॉर्टकट नहीं।
.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}
Sticky — पहले relative, फिर चिपका
sticky स्क्रॉल थ्रेशहोल्ड पार करने तक फ्लो में रहता है (top आम है), फिर अपने स्क्रॉल करने वाले पूर्वज में चिपक जाता है। स्क्रॉल की जगह और समझदार पैरेंट चाहिए — वरना टूटा लगता है।
.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}
शांत position आदत
relative छोटे झटकों और absolute एंकर के लिए। absolute ज्ञात पैरेंट के अंदर बैज और ओवरले के लिए। fixed और sticky जानबूझकर chrome के लिए रखें। z-index स्टैकिंग और float क्लियरिंग अपने पाठों के लिए छोड़ें।
.panel {
position: relative;
}
.panel__tag {
position: absolute;
top: 0;
left: 0;
}
खुद आज़माएँ
.cardकोposition: relativeऔर छोटेtop/leftसे हिलाएँ।.badgeकोabsoluteसेrelative.mediaपैरेंट में रखें।- कोने में छोटा
fixedनोटिस जोड़ें — स्क्रॉल करें और देखें कि रुकता है। - लंबे स्क्रॉल योग्य सेक्शन में
top: 0वालाstickyलेबल आज़माएँ। - एक वाक्य लिखें: absolute कब fixed से सुरक्षित है?
आम गलतियाँ
- बिना position वाले पैरेंट के
absoluteऔर हैरानी कि क्यों दूर कूद गया - सामान्य पेज लेआउट के लिए
fixedपकड़ना - बिना स्क्रॉल ओवरफ्लो या विरोधी पूर्वजों के साथ
stickyकी उम्मीद - इस पाठ को inline-block पंक्ति पाठ जैसा मानना (अलग काम)
- प्लेसमेंट मोड सीखने की जगह यहाँ z-index या float रेसिपी फेंकना
सारांश
positionफ्लो, पूर्वज या viewport के सापेक्ष प्लेसमेंट नियंत्रित करता हैrelativeहिलाता और एंकर करता है;absoluteउसी एंकर में फ्लो छोड़ता हैfixedviewport पर पिन;stickyrelative और चिपके व्यवहार को मिलाता है- Offsets तभी मायने रखते हैं जब position
staticन हो - स्टैकिंग और float बाद के लिए — पहले पाँच मोड सीखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी