← Back to CSS Course | Chapter 5: Layout & Display | Lesson 4 of 14

CSS Position

किसी कमरे में furniture रखने की कल्पना करें। Static एक भारी wardrobe जैसा है जो बिल्कुल वहीं बैठता है जहाँ उसे delivered किया गया था। Relative उस wardrobe को थोड़ा दाईं तरफ़ slide करने जैसा है, लेकिन उसकी original जगह reserved रखते हुए। Absolute एक lamp उठाकर सीधे wall के किसी specific shelf पर mount करने जैसा है। Fixed एक mirror को अपने glasses पर चिपकाने जैसा है—यह आपकी आँखों के ठीक सामने रहता है चाहे आप कहीं भी चलें। CSS position properties वही placement rules हैं। ये browser को exactly बताती हैं कि आपके layout elements के coordinates कैसे calculate करें।

In this page:

  1. Static और Relative Positioning
  2. Absolute Positioning
  3. Fixed Positioning
  4. Sticky Positioning
  5. Z-index Interaction
Syntax
css 
selector {
  position: static | relative | absolute | fixed | sticky;
  top: length;
  left: length;
}

Static और Relative Positioning

Static सभी elements के लिए default layout position है। Elements page के natural flow के हिसाब से position होते हैं।

Relative positioning आपको top, right, bottom, या left offsets इस्तेमाल करके किसी element को उसकी normal position से थोड़ा nudge करने देती है, बिना आस-पास के elements के layout को असर किए।

Note:
  • nested absolute elements के लिए एक local coordinate anchor बनाने के लिए relative positioning इस्तेमाल करें।
  • Accepted values:
  • static — normal flow (initial value); offsets नज़रअंदाज़ होते हैं
  • relative — normal position से offset, जगह बनी रहती है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: Relatively positioned offsets element की original जगह पर page पर एक खाली gap छोड़ जाते हैं।

उदाहरण: Static and Relative Positioning

css 
<style>
.static-box {
  position: static;
  top: 40px;
  left: 40px;
  background: lightgray;
  padding: 10px;
  margin-bottom: 20px;
}
.wrapper {
  position: relative;
  border: 2px dashed #999;
  padding: 20px;
  min-height: 100px;
}
.ghost {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 240px;
  height: 56px;
  border: 2px dashed crimson;
  background: rgba(220, 20, 60, 0.08);
  box-sizing: border-box;
}
.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  width: 240px;
  height: 56px;
  background: dodgerblue;
  color: white;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<div class="static-box">position: static; top: 40px; left: 40px &mdash; ignored, this box hasn't moved</div>

<div class="wrapper">
  <div class="ghost"></div>
  <div class="relative-box">position: relative; top: 20px; left: 30px &mdash; shifted away from the dashed ghost outline (its original spot)</div>
</div>

Absolute Positioning

Absolute positioning किसी element को natural page flow से पूरी तरह हटा देती है। यह अपने सबसे नज़दीकी positioned ancestor (static के अलावा किसी position वाला ancestor) के relative position होता है। अगर कोई positioned ancestor नहीं है, तो यह initial viewport के relative position होता है।

Note:
  • अपने nested absolute elements को drift होने से रोकने के लिए हमेशा अपने parent container पर position: relative set करें।
  • Accepted values:
  • absolute — flow से हटाया गया; सबसे नज़दीकी positioned ancestor के against रखा जाता है
  • top / right / bottom / left — उस ancestor से offsets
  • parent पर relative — इसे anchor बनाता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: Absolutely positioned elements कोई layout space reserve नहीं करते, जिससे आस-पास के elements ऊपर move होकर gap भर देते हैं।

उदाहरण: Absolute Positioning

css 
<style>
.parent {
  position: relative;
  min-height: 150px;
  background: #eef;
  border: 3px solid #334;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
  background: crimson;
  color: white;
  padding: 8px 12px;
}
</style>
<div class="parent">
  Parent: position: relative, with a visible border
  <div class="child">Child: position: absolute; top: 0; right: 0</div>
</div>

Fixed Positioning

Fixed positioning किसी element को natural page flow से पूरी तरह हटा देती है और उसे browser viewport के relative position करती है। इसका मतलब है कि element screen पर उसी position पर locked रहता है, यहाँ तक कि जब user scroll करता है तब भी।

Note:
  • sticky headers, floating contact buttons, या persistent alert bars बनाने के लिए fixed positioning इस्तेमाल करें।
  • Accepted values:
  • fixed — viewport के against positioned और scrolling के दौरान वहीं रहता है
  • top / right / bottom / left — viewport edges से offsets
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: अगर आप अपनी body में matching margins नहीं जोड़ते तो fixed elements नीचे के important page content को cover कर सकते हैं।

उदाहरण: Fixed Positioning

css 
<style>
.fixed-badge {
  position: fixed;
  top: 20px;
  right: 20px;
  background: darkorange;
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: bold;
}
.content p {
  background: #f0f0f0;
  padding: 12px;
  margin-bottom: 10px;
}
</style>
<div class="fixed-badge">Fixed to the top-right corner</div>
<div class="content">
  <p>Scroll down to see the fixed element stay in its corner.</p>
  <p>Line 1 — keep scrolling, the badge stays put.</p>
  <p>Line 2 — keep scrolling, the badge stays put.</p>
  <p>Line 3 — keep scrolling, the badge stays put.</p>
  <p>Line 4 — keep scrolling, the badge stays put.</p>
  <p>Line 5 — keep scrolling, the badge stays put.</p>
  <p>Line 6 — keep scrolling, the badge stays put.</p>
  <p>Line 7 — keep scrolling, the badge stays put.</p>
  <p>Line 8 — keep scrolling, the badge stays put.</p>
  <p>Line 9 — keep scrolling, the badge stays put.</p>
  <p>Line 10 — keep scrolling, the badge stays put.</p>
  <p>Line 11 — keep scrolling, the badge stays put.</p>
  <p>Line 12 — keep scrolling, the badge stays put.</p>
  <p>Line 13 — keep scrolling, the badge stays put.</p>
  <p>Line 14 — keep scrolling, the badge stays put.</p>
  <p>Line 15 — keep scrolling, the badge stays put.</p>
  <p>Line 16 — keep scrolling, the badge stays put.</p>
  <p>Line 17 — keep scrolling, the badge stays put.</p>
  <p>Line 18 — keep scrolling, the badge stays put.</p>
  <p>Line 19 — keep scrolling, the badge stays put.</p>
  <p>Line 20 — keep scrolling, the badge stays put.</p>
  <p>Line 21 — keep scrolling, the badge stays put.</p>
  <p>Line 22 — keep scrolling, the badge stays put.</p>
  <p>Line 23 — keep scrolling, the badge stays put.</p>
  <p>Line 24 — keep scrolling, the badge stays put.</p>
  <p>Line 25 — keep scrolling, the badge stays put.</p>
  <p>Line 26 — keep scrolling, the badge stays put.</p>
  <p>Line 27 — keep scrolling, the badge stays put.</p>
  <p>Line 28 — keep scrolling, the badge stays put.</p>
  <p>Line 29 — keep scrolling, the badge stays put.</p>
  <p>Line 30 — keep scrolling, the badge stays put.</p>
  <p>Line 31 — keep scrolling, the badge stays put.</p>
  <p>Line 32 — keep scrolling, the badge stays put.</p>
  <p>Line 33 — keep scrolling, the badge stays put.</p>
  <p>Line 34 — keep scrolling, the badge stays put.</p>
  <p>Line 35 — keep scrolling, the badge stays put.</p>
  <p>Line 36 — keep scrolling, the badge stays put.</p>
  <p>Line 37 — keep scrolling, the badge stays put.</p>
  <p>Line 38 — keep scrolling, the badge stays put.</p>
  <p>Line 39 — keep scrolling, the badge stays put.</p>
  <p>Line 40 — keep scrolling, the badge stays put.</p>
  <p>Line 41 — keep scrolling, the badge stays put.</p>
  <p>Line 42 — keep scrolling, the badge stays put.</p>
  <p>Line 43 — keep scrolling, the badge stays put.</p>
  <p>Line 44 — keep scrolling, the badge stays put.</p>
  <p>Line 45 — keep scrolling, the badge stays put.</p>
  <p>Line 46 — keep scrolling, the badge stays put.</p>
  <p>Line 47 — keep scrolling, the badge stays put.</p>
  <p>Line 48 — keep scrolling, the badge stays put.</p>
  <p>Line 49 — keep scrolling, the badge stays put.</p>
  <p>Line 50 — keep scrolling, the badge stays put.</p>
</div>

Sticky Positioning

Sticky positioning relative और fixed positioning के hybrid जैसा behave करती है। Element page flow के अंदर एक relatively positioned element की तरह act करता है जब तक वह एक specified scroll threshold तक न पहुँच जाए, जहाँ यह एक fixed element की तरह screen से चिपक जाता है।

Note:
  • readable table headers या sticky sidebars बनाने के लिए sticky positioning इस्तेमाल करें जो users के scroll करने पर view में बने रहें।
  • Accepted values:
  • sticky — तब तक relative की तरह act करता है जब तक एक scroll threshold तक न पहुँचे, फिर चिपक जाता है
  • top / bottom / left / right — threshold offsets
  • एक scroll container ancestor — यह कहाँ चिपकता है यह सीमित करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: Sticky elements को कम से कम एक offset property (जैसे top: 0) defined होनी चाहिए, वरना वे static elements जैसे behave करेंगे।

उदाहरण: Sticky Positioning

css 
<style>
.content p {
  background: #f0f0f0;
  padding: 12px;
  margin-bottom: 10px;
}
.sticky-header {
  position: sticky;
  top: 0;
  background: seagreen;
  color: white;
  padding: 10px;
  font-weight: bold;
}
</style>
<div class="content">
  <p>Above the sticky header — line 1.</p>
  <p>Above the sticky header — line 2.</p>
  <p>Above the sticky header — line 3.</p>
  <p>Above the sticky header — line 4.</p>
  <p>Above the sticky header — line 5.</p>
</div>
<div class="sticky-header">Sticky: acts normal here, then sticks to the top once you scroll past it</div>
<div class="content">
  <p>Below the sticky header — line 1. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 2. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 3. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 4. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 5. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 6. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 7. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 8. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 9. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 10. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 11. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 12. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 13. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 14. It stays stuck at the top while you scroll through this.</p>
  <p>Below the sticky header — line 15. It stays stuck at the top while you scroll through this.</p>
</div>

Z-index Interaction

जब आप elements को position करते हैं, तो वे overlap हो सकते हैं। z-index property इन overlapping elements का stacking order तय करती है, उन्हें आगे लाते हुए या पीछे धकेलते हुए।

Note: Z-index सिर्फ positioned elements पर काम करता है (relative, absolute, fixed, या sticky position वाले elements)।
Warning: बहुत ज़्यादा, random z-index values (जैसे 9999) लागू करना बड़े projects में overlapping elements को manage करना मुश्किल बना सकता है।

उदाहरण: Z-index Interaction

css 
<style>
.wrapper {
  position: relative;
  min-height: 120px;
}
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
  height: 100px;
  background: gray;
  color: white;
  z-index: 1;
}
.front {
  position: absolute;
  top: 50px;
  left: 60px;
  width: 150px;
  height: 100px;
  background: tomato;
  color: white;
  z-index: 2;
}
</style>
<div class="wrapper">
  <div class="back">Behind</div>
  <div class="front">In front</div>
</div>
Live Example
Related Topics

CSS Position Offsets · CSS object-position · CSS Max-width · CSS Hide Elements

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. अपने parent container पर relative positioning set किए बिना elements पर absolute positioning इस्तेमाल करना, जिससे वे drift हो जाते हैं।
  2. sticky elements पर ज़रूरी offsets (जैसे top या left) छोड़ देना, जो उन्हें चिपकने से रोकता है।
  3. statically positioned elements पर z-index values लागू करना, जिन्हें browsers नज़रअंदाज़ कर देते हैं।
चैप्टर सारांश
  • position property control करती है कि elements page पर कैसे placed होते हैं।
  • Relative positioning offset values एक खाली जगह छोड़ जाती हैं, जबकि absolute और fixed elements पूरी तरह page flow से हटा दिए जाते हैं।
  • अपने positioned elements पर z-index इस्तेमाल करके overlapping elements को साफ़ तरीके से manage करें।
ब्राउज़र सपोर्ट

Standard positioning properties और basic sticky rules हर modern web browser द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Max-width Next Lesson → CSS Position Offsets

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.