What you'll learn
The position property lets you take an element out of normal flow and place it exactly where you want — a notification badge, a sticky header, a modal overlay. It's powerful and, once understood, wonderfully precise.
By the end you'll be able to:
- Use all five
positionvalues - Understand the positioning context for
absolute - Build sticky headers and pinned overlays
- Control layering with
z-index
The position values
| Value | Behaviour |
|---|---|
static | The default — normal flow, offsets ignored |
relative | Nudged from its normal spot; its space is kept |
absolute | Removed from flow; placed against the nearest positioned ancestor |
fixed | Removed from flow; pinned to the viewport, stays on scroll |
sticky | Flows normally, then sticks when it hits a set offset |
The offset properties top, right, bottom, and left only take effect once position is something other than static.
Relative & absolute
These two work as a team. Setting position: relative on a parent establishes a positioning context; a child with position: absolute is then placed relative to that parent instead of the whole page. This is the standard recipe for badges, icons, and captions layered onto a box:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned against .card */
top: -8px;
right: -8px;
}Key idea
relative, child absolute. Without a positioned ancestor, an absolute element positions against the whole page — the usual cause of "my badge flew to the corner of the screen."Fixed & sticky
fixed pins an element to the viewport, so it stays put as the page scrolls — perfect for a persistent "back to top" button or a modal backdrop. sticky is the clever hybrid: the element scrolls with the page normally until it reaches a threshold (like top: 0), then "sticks" there. It's the modern way to build sticky headers and section titles — no JavaScript required:
.header {
position: sticky; /* scrolls normally, then sticks */
top: 0; /* ...once it reaches the top */
z-index: 10; /* stays above other content */
}Stacking & z-index
When positioned elements overlap, z-index controls which sits on top — higher numbers win. It only applies to elements with a position other than static. Keep your z-index values sane (like 10, 100, 1000 for layers) rather than reaching for 999999 — huge arbitrary values quickly become a mess to manage.
Recap & quick check
Key takeaways
- position: static is the default; relative, absolute, fixed, and sticky change how an element is placed.
- Offsets (top/right/bottom/left) only work on non-static elements.
- Parent relative + child absolute is the standard pattern for placing badges and overlays.
- fixed pins to the viewport; sticky flows then sticks at a threshold like top: 0.
- z-index layers overlapping positioned elements — higher is on top; keep values modest.
Quick check
1. What is the default position value?
2. An absolutely positioned element is placed relative to...
3. Which value keeps an element pinned to the viewport as you scroll?
4. What does position: sticky do?
5. z-index only affects elements that are...
Positioning handles the special cases. For everyday layout, the modern hero is next: Flexbox.