CSS Position
Position lifts elements out of normal flow: badges pinned to corners, sticky headers, full-screen overlays. Five values, one golden pattern — relative parent, absolute child — and z-index to referee the stack.
1. The five values
| Value | Behavior |
|---|---|
static | Default. Normal flow; offsets ignored. |
relative | Nudged from its own spot; original space preserved. Anchors children. |
absolute | Removed from flow; positions against the nearest non-static ancestor. |
fixed | Pinned to the viewport; ignores scrolling. |
sticky | Scrolls normally, then pins at your threshold (needs top etc.). |
2. The pattern you'll use forever
.card { position: relative; } /* the anchor */
.badge {
position: absolute;
top: -8px; right: -8px; /* the pin */
}Absolute children hunt up the tree for the nearest positioned ancestor — forget position: relative on the parent and your badge pins to the page instead. When positioned elements overlap, z-index (on positioned elements only) decides who's on top.
sticky silently fails without a threshold like top: 0, and when any ancestor has overflow: hidden. Those two cover 90% of "sticky isn't working" bugs.3. Try it yourself
Pin the "NEW" badge to the card's top-right corner (relative parent → absolute child, top:-10px; right:-10px), and make the header stick to the top while the content scrolls.
4. Quiz — check your understanding
CSS Position Quiz
4 questions · pass at 60%Q1. An absolutely positioned element positions itself against…
Q2. Why put position: relative on a parent with no offsets?
Q3. A sticky element refuses to stick. Most likely cause?
Q4. z-index works on…
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.