📘 Lesson · Lesson 23
Position: relative, absolute, fixed
Position: relative, absolute, fixed
What position Does
Normally, elements flow one after another in the order they appear — that's the natural document flow you've been working with. The
position property lets you BREAK out of that flow and place an element precisely where you want: pinned to a corner, floating over other content, or stuck to the screen as you scroll. It has five values, and understanding when each applies unlocks layouts like sticky headers, badges, tooltips and overlays.static and relative
.box { position: static; } /* DEFAULT - normal flow, offsets ignored */
.box {
position: relative; /* stays in flow, but CAN be nudged */
top: 10px; /* moves 10px DOWN from its normal spot */
left: 20px; /* moves 20px RIGHT from normal */
}static is the default every element already has — normal flow, and
top/left/etc. do nothing. relative keeps the element in its normal place in the flow, but now you CAN nudge it with offsets, measured from where it WOULD have been. On its own, relative's nudging is minor — but its real superpower is invisible: it becomes the positioning anchor for absolute children (next). This "relative parent, absolute child" pairing is the most important positioning pattern in CSS.absolute — the Powerful One
.parent {
position: relative; /* the anchor */
}
.badge {
position: absolute; /* removed from flow, positioned freely */
top: 10px;
right: 10px; /* pinned to top-right of .parent */
}absolute removes an element from the normal flow entirely and positions it relative to its nearest positioned ancestor (an ancestor with position relative/absolute/fixed). This is how you pin a "SALE" badge to the corner of a product card, place a close button in a modal's corner, or position a tooltip. The critical pattern: set the PARENT to
position: relative, then the child to position: absolute — now the child positions itself within that parent. Forget the relative parent and the absolute element positions against the whole page instead — the #1 positioning bug.fixed and sticky — the scroll behaviours
/* FIXED - pinned to the SCREEN, stays put while scrolling */
.navbar {
position: fixed;
top: 0;
width: 100%; /* a header always visible at the top */
}
/* STICKY - normal until you scroll to it, then sticks */
.section-title {
position: sticky;
top: 0; /* sticks to top once it reaches there */
}fixed pins an element to the viewport (the screen) — it stays in place even as the page scrolls. This is how "always visible" navigation bars, back-to-top buttons, and cookie banners work. sticky is a clever hybrid: the element scrolls normally UNTIL it hits a set position (like
top: 0), then "sticks" there while the rest scrolls past — perfect for section headings that stay visible while you read their section. Both are hugely useful for modern, navigable pages.The Offset Properties — top, right, bottom, left
top: 0; /* distance from the top edge */
right: 20px; /* distance from the right edge */
bottom: 10px; /* distance from the bottom edge */
left: 50%; /* distance from the left edge */These four properties position an element once it's relative, absolute, fixed or sticky (they do nothing on static). They measure distance from the corresponding edge of the positioning context. Combine them to pin precisely: top: 0; right: 0 = top-right corner; bottom: 20px; left: 20px = bottom-left with a gap. For true centering of an absolute element, developers combine these with transforms (a later chapter). For now: offsets + position = precise placement.
Exam Corner
Q: What is the default position value? static (normal flow; offsets ignored).
Q: What does position: relative enable? Nudging with offsets from its normal spot, and acting as the anchor for absolute children.
Q: How do you pin a badge to a card's corner? Card = position: relative; badge = position: absolute with top/right offsets.
Q: Difference between fixed and sticky? fixed stays pinned to the screen always; sticky scrolls normally then sticks when it reaches its offset.
Q: Which properties position a non-static element? top, right, bottom, left.
Q: What does position: relative enable? Nudging with offsets from its normal spot, and acting as the anchor for absolute children.
Q: How do you pin a badge to a card's corner? Card = position: relative; badge = position: absolute with top/right offsets.
Q: Difference between fixed and sticky? fixed stays pinned to the screen always; sticky scrolls normally then sticks when it reaches its offset.
Q: Which properties position a non-static element? top, right, bottom, left.
position क्या करता है
सामान्यतः elements जिस order में आते हैं एक के बाद एक बहते हैं — वही natural document flow जिसके साथ आप काम कर रहे हैं.
position property आपको उस flow से BAHAR निकलकर element को ठीक वहां रखने देती है जहां आप चाहें: किसी corner पर pinned, दूसरे content के ऊपर floating, या scroll करते समय screen से चिपका. इसकी पांच values हैं, और हर कब लगती है समझना sticky headers, badges, tooltips और overlays जैसे layouts खोलता है.static और relative
.box { position: static; } /* DEFAULT - normal flow, offsets ignore */
.box {
position: relative; /* flow me rehta, par nudge HO sakta */
top: 10px; /* apni normal jagah se 10px NEECHE */
left: 20px; /* normal se 20px DAAYE */
}static default है जो हर element के पास पहले से है — normal flow, और
top/left/आदि कुछ नहीं करते. relative element को flow में उसकी normal जगह रखता है, पर अब आप उसे offsets से nudge कर सकते हैं, वहां से मापे जहां वह HOTA. अपने आप में relative का nudging मामूली है — पर इसकी असली superpower अदृश्य है: यह absolute children के लिए positioning anchor बन जाता है (अगला). यह "relative parent, absolute child" जोड़ी CSS का सबसे ज़रूरी positioning pattern है.absolute - ताकतवर वाला
.parent {
position: relative; /* anchor */
}
.badge {
position: absolute; /* flow se hata, freely positioned */
top: 10px;
right: 10px; /* .parent ke top-right par pinned */
}absolute element को normal flow से पूरी तरह हटाता है और उसे अपने निकटतम positioned ancestor (position relative/absolute/fixed वाला ancestor) के सापेक्ष position करता है. product card के corner पर "SALE" badge pin करने, modal के corner में close button रखने, या tooltip position करने का यही तरीका है. अहम pattern: PARENT को
position: relative set कीजिए, फिर child को position: absolute — अब child उस parent के अंदर खुद को position करता है. relative parent भूलिए और absolute element पूरे page के सापेक्ष position हो जाता है — #1 positioning bug.fixed और sticky — scroll व्यवहार
/* FIXED - SCREEN par pinned, scroll par bhi wahi rehta */
.navbar {
position: fixed;
top: 0;
width: 100%; /* header hamesha upar dikhta */
}
/* STICKY - normal jab tak scroll na karo, phir chipak jata */
.section-title {
position: sticky;
top: 0; /* wahan pahunchte hi top par chipakta */
}fixed element को viewport (screen) पर pin करता है — page scroll होने पर भी वह जगह पर रहता है. "हमेशा दिखने वाले" navigation bars, back-to-top buttons, और cookie banners ऐसे ही काम करते हैं. sticky चतुर hybrid है: element normal scroll करता है JAB TAK एक set position (जैसे
top: 0) तक न पहुंचे, फिर बाकी scroll होते हुए वहां "चिपकता" है — section headings के लिए perfect जो उनका section पढ़ते समय दिखते रहें. दोनों modern, navigable pages के लिए बेहद उपयोगी.Offset Properties — top, right, bottom, left
top: 0; /* upar ke kinare se doori */
right: 20px; /* daaye kinare se doori */
bottom: 10px; /* neeche ke kinare se doori */
left: 50%; /* baaye kinare se doori */ये चार properties element को position करती हैं जब वह relative, absolute, fixed या sticky हो (static पर कुछ नहीं करतीं). ये positioning context के संबंधित किनारे से दूरी मापती हैं. Precisely pin करने को combine कीजिए: top: 0; right: 0 = top-right corner; bottom: 20px; left: 20px = gap के साथ bottom-left. absolute element के सच्चे centering को developers इन्हें transforms के साथ combine करते हैं (बाद का chapter). अभी: offsets + position = precise placement.
Exam Corner
Q: Default position value क्या है? static (normal flow; offsets ignore).
Q: position: relative क्या enable करता है? अपनी normal जगह से offsets से nudge करना, और absolute children के लिए anchor बनना.
Q: Card के corner पर badge कैसे pin करते हैं? Card = position: relative; badge = top/right offsets के साथ position: absolute.
Q: fixed और sticky में अंतर? fixed हमेशा screen पर pinned रहता; sticky normal scroll करके अपने offset पर पहुंचने पर चिपकता है.
Q: कौन-सी properties non-static element को position करती हैं? top, right, bottom, left.
Q: position: relative क्या enable करता है? अपनी normal जगह से offsets से nudge करना, और absolute children के लिए anchor बनना.
Q: Card के corner पर badge कैसे pin करते हैं? Card = position: relative; badge = top/right offsets के साथ position: absolute.
Q: fixed और sticky में अंतर? fixed हमेशा screen पर pinned रहता; sticky normal scroll करके अपने offset पर पहुंचने पर चिपकता है.
Q: कौन-सी properties non-static element को position करती हैं? top, right, bottom, left.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.