स्थिति निर्धारण: relative, absolute, fixed, sticky
position मानों से तत्वों को सामान्य प्रवाह से बाहर निकालकर सामग्री को ओवरले करें, हेडर स्थिर करें और स्टिकी साइडबार बनाएँ।
स्थिति निर्धारण: relative, absolute, fixed, sticky, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सामान्य दस्तावेज़ प्रवाह
डिफ़ॉल्ट रूप से तत्व सामान्य दस्तावेज़ प्रवाह का पालन करते हैं: ब्लॉक तत्व लंबवत रूप से एक-दूसरे के नीचे आते हैं और इनलाइन तत्व पाठ के भीतर क्षैतिज रूप से प्रवाहित होते हैं। position गुण आपको ओवरले, स्थिर हेडर और टूलटिप के लिए इस प्रवाह से बाहर निकलने देता है।
position: static (डिफ़ॉल्ट)
हर तत्व की शुरुआत position: static से होती है। इसका अर्थ है कि उसकी स्थिति सामान्य दस्तावेज़ प्रवाह से निर्धारित होती है। top, right, bottom और left गुणों का static तत्वों पर कोई प्रभाव नहीं पड़ता।
position: relative
position: relative तत्व को सामान्य प्रवाह में बनाए रखता है, लेकिन top, right, bottom, left का उपयोग करके उसकी मूल स्थिति से उसे स्थानांतरित करने देता है। महत्वपूर्ण रूप से, यह पूर्ण स्थिति वाले वंशजों के लिए स्थिति निर्धारण संदर्भ बनाता है।
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute तत्व को सामान्य प्रवाह से हटा देता है। इसका स्थान इसके सबसे निकट वाले स्थित पूर्वज के सापेक्ष निर्धारित होता है (जिसकी position static के अलावा कुछ और हो)। यदि कोई स्थित पूर्वज मौजूद न हो, तो इसका स्थान viewport के सापेक्ष निर्धारित होता है।
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}z-index गुण
स्थित तत्व एक-दूसरे के ऊपर आ सकते हैं। परतों का क्रम नियंत्रित करने के लिए z-index का उपयोग करें। z-index जितना अधिक होगा, तत्व उतना ही ऊपर दिखाई देगा। यह केवल स्थित तत्वों पर काम करता है (static पर नहीं)। इससे नया स्टैकिंग संदर्भ बनता है।
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed तत्व को सामान्य प्रवाह से हटा देता है और उसे viewport से जोड़ देता है। यह पेज के साथ स्क्रॉल नहीं होता। स्थिर हेडर, तैरते हुए ऐक्शन बटन और कुकी बैनर के लिए यह बहुत उपयोगी है।
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky एक मिश्रित व्यवस्था है: तत्व एक सीमा तक पेज के साथ स्क्रॉल होता है (यह सीमा top/bottom से निर्धारित की जाती है), फिर वहीं चिपक जाता है। लंबे टेबल में सेक्शन हेडर या हेडर के बाद चिपकने वाले साइडबार के लिए यह उपयोगी है।
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}position: absolute से केंद्रित करना
एक प्रसिद्ध तकनीक यह है कि position: absolute; top: 50%; left: 50% को transform: translate(-50%, -50%) के साथ मिलाकर किसी तत्व को उसके स्थित पैरेंट के ठीक केंद्र में रखा जाए।
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}छिपा हुआ ओवरफ़्लो absolute चाइल्ड तत्वों को काट देता है
डिफ़ॉल्ट रूप से, absolute स्थिति वाला चाइल्ड तत्व अपने पैरेंट की सीमाओं से बाहर जा सकता है। पैरेंट में overflow: hidden जोड़ने पर उसके बॉक्स के बाहर का सब कुछ कट जाता है — यह कार्ड की इमेज के प्रभावों और बैज को काटने के लिए उपयोगी है।
समस्या: अनचाहे स्टैकिंग संदर्भ
कुछ गुण अनजाने में स्टैकिंग संदर्भ बना देते हैं: transform, filter, isolation: isolate। इससे z-index का टकराव हो सकता है, जिसमें z-index: 9999 वाला तत्व भी किसी दूसरे तत्व के पीछे रहता है, क्योंकि वह निचले स्तर वाले स्टैकिंग संदर्भ के अंदर होता है।
हर positioning का उपयोग कब करें
relative: ऑफ़सेट और स्थितिनिर्धारण संदर्भ के लिए। absolute: पैरेंट के सापेक्ष बैज, टूलटिप और ओवरले के लिए। fixed: हमेशा दिखने वाले हेडर, मोडल और टोस्ट के लिए। sticky: सेक्शन हेडर और स्क्रॉल के साथ चलने वाले साइडबार नेविगेशन के लिए। लेआउट के लिए position का उपयोग न करें — Flex या Grid का उपयोग करें।
त्वरित जाँच
किसी तत्व में position: absolute; top: 0; right: 0; है। यदि उसके पैरेंट में position: relative है, तो वह कहाँ दिखाई देगा?
पुनरावलोकन: CSS positioning
static डिफ़ॉल्ट है। relative तत्व को प्रवाह से हटाए बिना उसका ऑफ़सेट निर्धारित करता है और positioning संदर्भ बनाता है। absolute तत्व को प्रवाह से हटा देता है और सबसे निकट वाले स्थित पूर्वज के सापेक्ष उसका स्थान निर्धारित करता है। fixed तत्व को viewport से चिपका देता है। sticky पहले स्क्रॉल होता है, फिर चिपक जाता है। ऊपर-नीचे दिखने वाले क्रम को नियंत्रित करने के लिए z-index का उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “स्थिति निर्धारण: relative, absolute, fixed, sticky” पाठ निःशुल्क है?
हाँ—“स्थिति निर्धारण: relative, absolute, fixed, sticky” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“स्थिति निर्धारण: relative, absolute, fixed, sticky” में मैं क्या सीखूँगा?
position मानों से तत्वों को सामान्य प्रवाह से बाहर निकालकर सामग्री को ओवरले करें, हेडर स्थिर करें और स्टिकी साइडबार बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“स्थिति निर्धारण: relative, absolute, fixed, sticky” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- सिलेक्टर और कैस्केड
- रंग, टाइपोग्राफी और बॉक्स मॉडल
- Display: block, inline, flex, grid की मूल बातें
- स्थिति निर्धारण: relative, absolute, fixed, sticky