CSS पोज़िशन

ज़्यादातर elements वहीं बैठते हैं जहाँ browser उन्हें रखता है, एक के बाद एक, ऊपर से नीचे। position property आपको उस बहाव से बाहर निकलकर element को ठीक वहीं रखने देती है जहाँ आप चाहते हैं — card के कोने पर badge, scroll करते हुए ऊपर टिका menu, screen के कोने पर जमा button।

Diagram — देखें, यह सब कैसे जुड़ता है

Position के पाँच मान होते हैं। डिफ़ॉल्ट है static। बाकी चार — relative, absolute, fixed और sticky — हर एक element को अलग तरीके से हिलाते हैं। इन्हें एक-एक करके सीखें, और पूरा layout system समझ में आने लगता है।

Static — डिफ़ॉल्ट, कोई हलचल नहीं

position: static वह है जो हर element के पास होता है, जब तक आप उसे बदलें नहीं। Element पेज के सामान्य बहाव में बैठता है, ठीक वहीं जहाँ HTML उसे रखता है। Static element पर top, right, bottom और left properties कुछ नहीं करतीं — browser उन्हें बस नज़रअंदाज़ कर देता है।

Relative — हिलाएँ, पर जगह बनी रहे

position: relative आपको element को उसकी सामान्य जगह से top, right, bottom या left से थोड़ा हिलाने देता है। अहम बात: जिस जगह से वह आया था वह जगह बची रहती है। दूसरे elements gap भरने के लिए ऊपर नहीं खिसकते — पेज वह खाली जगह बनाए रखता है जहाँ element पहले था।

.badge {
  position: relative;
  top: -10px;
  left: 20px;
}

Absolute — parent के सहारे रखा गया

position: absolute element को सामान्य बहाव से पूरी तरह बाहर ले जाता है। दूसरे elements ऐसे व्यवहार करते हैं जैसे वह है ही नहीं। फिर उसे उसके निकटतम positioned पूर्वज के सहारे रखा जाता है — निकटतम parent जिसकी position static के अलावा कुछ और हो। अगर कोई parent positioned नहीं है, तो उसे पेज के सहारे रखा जाता है। इसी तरह badges, labels और close buttons card के कोने में सुथरे बैठते हैं।

.card {
  position: relative;
}
.card .badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Fixed — scroll करते हुए भी वहीं

position: fixed भी element को बहाव से बाहर ले जाता है, पर उसे किसी parent के नहीं, browser window के सहारे रखा जाता है। पेज को ऊपर-नीचे scroll करें और element screen पर ठीक उसी जगह रहता है। "Back to top" buttons और chat buttons इसी तरह काम करते हैं।

Sticky — scroll करे, फिर चिपक जाए

position: sticky relative और fixed का मेल है। Element पेज के साथ सामान्य रूप से scroll करता है — जब तक वह उस जगह तक नहीं पहुँचता जो आपने top से तय की है। फिर वह वहीं चिपक जाता है और बाकी पेज उसके पास से scroll करता रहता है। Section headings और navigation bars इसका हर समय इस्तेमाल करते हैं।

Z-index — कौन-सा element ऊपर है

जब positioned elements एक-दूसरे के ऊपर आते हैं, तो z-index तय करता है कि कौन-सा ऊपर है। ज़्यादा नंबर जीतता है। पर एक नियम है जिसे beginners भूल जाते हैं: z-index सिर्फ उन elements पर काम करता है जिनकी position static के अलावा कुछ और हो। Static element पर z-index: 10 लगाएँ और कुछ नहीं होगा।

.popup {
  position: absolute;
  z-index: 10;
}
.card {
  position: relative;
  z-index: 1;
}

आम गलतियाँ

• position: absolute इस्तेमाल करना और parent को position: relative न देना, इसलिए element गलत कोने में जा पड़ता है।
• Static element पर z-index लगाना और हैरान होना कि stacking क्यों नहीं बदलती।
• position: fixed से button लगाना और उसे छोटी screen पर पेज का content ढकने देना।
• position: sticky को ऐसे parent के अंदर इस्तेमाल करना जिस पर overflow: hidden हो — तब sticky element कभी चिपकता नहीं।
• Relative element को top से हिलाना और भूल जाना कि उसकी मूल जगह बची रहती है, जिससे gap रह जाता है।

याद रखें

• Static डिफ़ॉल्ट है — element सामान्य बहाव में बैठता है और हिल नहीं सकता।
• Relative element को हिलाता है पर उसकी मूल जगह बची रखता है।
• Absolute बहाव छोड़ देता है और निकटतम positioned parent के सहारे खुद को रखता है।
• Fixed पेज के scroll करते हुए भी screen पर उसी जगह रहता है।
• Sticky सामान्य रूप से scroll करता है, फिर आपके top मान तक पहुँचकर चिपक जाता है।
• z-index सिर्फ positioned elements पर काम करता है — ज़्यादा नंबर ऊपर बैठता है।
• तरकीब: Absolute के लिए parent relative — नहीं तो कोना गलत।

उदाहरण समझिए

• .sticky-bar { position: sticky; top: 0; } — नीला bar पेज के साथ scroll करता है, फिर screen के ऊपर चिपक जाता है जब वह ऊपर के किनारे तक पहुँचता है।
• .card { position: relative; } — card सामान्य बहाव में रहता है, पर क्योंकि वह positioned है, उसके अंदर का badge उसे सहारा बना सकता है।
• .badge { position: absolute; top: -12px; right: 16px; } — NEW badge card के सहारे रखा जाता है, ऊपर के किनारे से आधा बाहर लटका हुआ, दाईं ओर से 16px।
• .avatar { width: 90px; height: 90px; border-radius: 50%; } — पूरी तरह गोल कोनों वाला चौकोर बॉक्स गोला बन जाता है, यहाँ छात्र के initials के लिए इस्तेमाल हुआ है।
• .top-btn { position: fixed; right: 20px; bottom: 20px; } — Top button browser window पर जमा है, इसलिए पेज के scroll करते हुए भी वह नीचे-दाएँ कोने में रहता है।