Static और Relative Positioning
डिफ़ॉल्ट static position समझिए और जानिए कि relative तत्वों को उनके सामान्य स्थान से कैसे खिसकाता है।
Static और Relative Positioning, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्थिति प्रॉपर्टी
position प्रॉपर्टी यह नियंत्रित करती है कि कोई एलिमेंट दस्तावेज़ प्रवाह में किस तरह रखा जाए। इसके पाँच मान हैं: static, relative, absolute, fixed और sticky।
स्थिति: स्थिर (डिफ़ॉल्ट)
हर एलिमेंट का डिफ़ॉल्ट position: static होता है। स्थिर एलिमेंट दस्तावेज़ के सामान्य प्रवाह का पालन करते हैं — ब्लॉक एलिमेंट लंबवत रूप से एक-दूसरे के नीचे आते हैं और इनलाइन एलिमेंट बाएँ से दाएँ प्रवाहित होते हैं। ऑफ़सेट प्रॉपर्टीज़ (top, right, bottom, left) का कोई प्रभाव नहीं होता।
स्थिति: सापेक्ष
position: relative एलिमेंट को सामान्य प्रवाह में बनाए रखता है, लेकिन top, right, bottom, left का उपयोग करके उसे उसकी अपनी सामान्य स्थिति के सापेक्ष ऑफ़सेट करने देता है।
<div class="shifted">Shifted 10px down, 20px right — original space still reserved.</div>
मुख्य बात: स्थान सुरक्षित रहता है
जब आप ऑफ़सेट के साथ position: relative का उपयोग करते हैं, तो एलिमेंट दिखाई देने में खिसक जाता है, लेकिन उसका मूल लेआउट स्थान अब भी सुरक्षित रहता है। अन्य एलिमेंट उस खाली जगह को नहीं भरते।
ऊपर, दाएँ, नीचे, बाएँ
ऑफ़सेट प्रॉपर्टीज़ एलिमेंट को उसके संदर्भ बिंदु से स्थानांतरित करती हैं:
top: ऊपरी किनारे से नीचे की ओर ले जाता हैleft: बाएँ किनारे से दाईं ओर ले जाता है- ऋणात्मक मान दिशा को उलट देते हैं
<span class="badge">NEW</span>
z-index के लिए स्थिति आवश्यक
z-index केवल स्थित एलिमेंट्स पर काम करता है (static पर नहीं)। यदि आपको परतों का क्रम नियंत्रित करना है, तो कम-से-कम position: relative सेट करें।
<div class="tooltip">Tooltip (relative + z-index)</div>
सापेक्ष स्थिति के रूप में कंटेनिंग ब्लॉक
position: relative का सबसे महत्वपूर्ण उपयोग किसी एलिमेंट को निरपेक्ष रूप से स्थित चाइल्ड एलिमेंट्स के लिए कंटेनिंग ब्लॉक बनाना है — वह भी बिना किसी ऑफ़सेट मान के।
<div class="card">Card content<span class="card__badge">Badge</span></div>
सापेक्ष स्थिति और रूपांतरण का संयोजन
position: relative को transform के साथ मिलाने पर नया स्टैकिंग संदर्भ बनता है। एलिमेंट प्रवाह में बना रहता है, लेकिन उसका दृश्य रूपांतरण किया जा सकता है।
<div class="hover-lift demo-hover">Hover me — I lift up</div>
relative का उपयोग कब NOT करें
हर एलिमेंट पर position: relative सेट करने से बचें। इससे स्टैकिंग संदर्भ बनते हैं, जो z-index प्रबंधन को जटिल बना सकते हैं। इसका उपयोग केवल तब करें जब आपको ऑफ़सेट की आवश्यकता हो या निरपेक्ष रूप से स्थित चाइल्ड एलिमेंट्स को एंकर करना हो।
ट्रांज़िशन के साथ संयोजन
चूँकि सापेक्ष स्थिति लेआउट प्रवाह को प्रभावित नहीं करती, इसलिए आप दृश्य प्रभावों के लिए top/left को सुरक्षित रूप से ऐनिमेट कर सकते हैं — हालाँकि transform: translate() को ऐनिमेट करना अधिक कार्यक्षम है।
<div class="shake demo-hover">Hover me — I shake</div>
स्थिति संबंधी समस्याओं की डीबगिंग
DevTools में प्रभावी position मान देखने के लिए Computed पैनल देखें। बॉक्स मॉडल आरेख लागू किए गए सटीक ऑफ़सेट निर्देशांक दिखाता है।
त्वरित जाँच
जब आप किसी एलिमेंट पर position: relative; top: 20px लागू करते हैं, तो उसके लेआउट स्थान पर क्या प्रभाव पड़ता है?
पुनरावलोकन
position: static डिफ़ॉल्ट है — न कोई ऑफ़सेट, न कोई स्टैकिंग। position: relative एलिमेंट की अपनी स्थिति से ऑफ़सेट की अनुमति देता है और उसका लेआउट स्थान सुरक्षित रखता है। इसकी सबसे महत्वपूर्ण भूमिका निरपेक्ष रूप से स्थित चाइल्ड एलिमेंट्स के लिए कंटेनिंग ब्लॉक के रूप में कार्य करना है।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “Static और Relative Positioning” पाठ निःशुल्क है?
हाँ—“Static और Relative Positioning” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Static और Relative Positioning” में मैं क्या सीखूँगा?
डिफ़ॉल्ट static position समझिए और जानिए कि relative तत्वों को उनके सामान्य स्थान से कैसे खिसकाता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“Static और Relative Positioning” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Static और Relative Positioning
- Absolute Positioning और Containing Block
- Fixed और Sticky Positioning
- Z-index और Stacking Context