CSS: CSS Positioning
Last updated: 2026-10-13
CSS positioning is a powerful layout tool that lets you precisely control element placement on the page.
Position Property Quick Reference
| Value | Behavior | Reference Point | Common Use |
|---|---|---|---|
static |
Normal flow (default) | — | Default behavior |
relative |
Offset from normal position | Self's original position | Fine-tuning, positioning context |
absolute |
Removed from flow | Nearest positioned ancestor | Badges, overlays |
fixed |
Fixed in viewport | Viewport | Sticky headers, back-to-top |
sticky |
Hybrid | Scroll container + viewport | Sticky headers |
1. position: relative
Offsets element from its normal position, without removing it from document flow:
▶ Example
▶ Try it YourselfCommon uses:
- Fine-tuning element position
- Creating positioning context for absolute children
2. position: absolute
Removes element from flow, positioned relative to nearest positioned ancestor:
▶ Example
▶ Try it YourselfKey point: If no positioned ancestor exists, absolute positions relative to the viewport.
3. position: fixed
Fixed in viewport, doesn't scroll with page:
▶ Example
▶ Try it YourselfCommon uses:
- Navigation bars
- Back-to-top buttons
- Chat widgets
4. position: sticky
Hybrid of relative and fixed — scrolls normally then "sticks" at a threshold:
▶ Example
▶ Try it YourselfUsage notes:
- Requires
top,bottom,left, orrightvalue to work - Parent element cannot have
overflow: hiddenoroverflow: auto - Parent height must be greater than sticky element height
5. z-index (Stacking Order)
When elements overlap, z-index controls which appears on top:
▶ Example
▶ Try it YourselfNote: z-index only works on positioned elements (non-static).
(1) Stacking Context
z-index is compared within the same "stacking context." Each positioned element creates a stacking context — children's z-index only compares within the parent's context.
❓ FAQ
position: relative to a parent (without offset), and position: absolute children will position relative to that parent. Without relative on the parent, absolute positions relative to the entire page.position: sticky as alternative for some scenarios, or use JavaScript to detect mobile and handle specially.opacity that create new stacking contexts.📖 Summary
- CSS positioning is a powerful layout tool
relativeis for fine-tuning and positioning contextabsoluteprecisely positions children within parentsfixedis for viewport-fixed elements (navigation, back-to-top)stickyis for "stick at position" scenarios- Master positioning with
z-indexstacking to handle any layout need
📝 Exercises
- Create a "product card" with a "HOT" badge in the top-right corner using
position: absolute. - Create a fixed bottom navigation bar or copyright notice using
position: fixed. - Create a "sticky heading" — section titles that stick to the top when scrolling until the next title pushes it away.
- Implement absolute centering of a child element (using absolute + top/left + transform).
