Advanced Positioning: sticky, fixed, absolute
Lesson 33 • Advanced Track
What You'll Learn
- Use position: sticky for headers that stick on scroll
- Create floating action buttons and cookie bars with position: fixed
- Position badges, tooltips, and dropdowns with absolute inside relative
- Understand z-index stacking contexts and isolation
- Avoid common positioning pitfalls
💡 Real-World Analogy
Fixed = a sticker on your monitor screen (always visible regardless of content). Sticky = a Post-it on a whiteboard that slides along as you scroll, then locks in place at a threshold. Absolute = a label pinned to a specific spot inside a box — move the box and the label moves with it.
Understanding CSS Positioning
CSS positioning removes elements from the normal document flow (or modifies how they participate in it). Understanding when to use each type is crucial for building layouts with overlapping elements, persistent navigation, tooltips, modals, and notification badges.
The key insight is that absolute positions relative to the nearest positioned ancestor (one with position: relative/absolute/fixed/sticky), while fixed positions relative to the viewport, and sticky toggles between relative and fixed based on scroll position.
Position Values Comparison
| Value | Relative To | In Flow? | Scroll Behaviour |
|---|---|---|---|
| static | Normal flow | Yes | Scrolls normally |
| relative | Its normal position | Yes | Scrolls normally |
| absolute | Nearest positioned ancestor | No | Scrolls with parent |
| fixed | Viewport | No | Stays in place |
| sticky | Scroll container | Yes (until stuck) | Sticks at threshold |
Sticky requires a threshold: You must specify at least one of top, bottom, left, or right for sticky to work. Without it, the browser doesn't know where to stick the element.
2. Absolute: Badges, Tooltips & Dropdowns
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
.relative-box { position: relative; background: #FFF3E0; padding: 40px 20px; border-radius: 12px; margin: 20px 0; border: 2px dashed #FF9800; }
.abs-badge { position: absolute; top: -10px; right: -10px; background: #F44336; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700
...The Absolute + Relative Pattern
Step 1: Set the parent container to position: relative. This creates the positioning context.
Step 2: Set the child to position: absolute with top, right, bottom, or left offsets.
The child is now positioned relative to the parent's edges. This is the standard pattern for notification badges, close buttons, decorative elements, and tooltips.
3. Fixed: Headers, FABs & Cookie Bars
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; margin: 0; padding-bottom: 80px; }
.fixed-header { position: fixed; top: 0; left: 0; right: 0; background: #1976D2; color: white; padding: 12px 24px; z-index: 100; font-weight: 700; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.content { margin-top: 60px; max-width: 700px; margin-left: auto; margin-right: auto; padding: 24px; }
p { line-height: 1.8; color
...4. Z-Index & Stacking Contexts
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
.stack-demo { position: relative; height: 250px; margin: 24px 0; }
.layer { position: absolute; width: 200px; padding: 20px; border-radius: 12px; font-weight: 600; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.layer-1 { background: #F44336; top: 0; left: 0; z-index: 1; }
.layer-2 { background: #4CAF50; top: 30px; left: 60px; z-index: 2; }
.layer-3 { background: #1976D
...When to Use This
- Sticky: Table headers, section labels, sidebars that follow scroll
- Fixed: Persistent navbars, FABs, cookie banners, back-to-top buttons
- Absolute: Notification badges, tooltips, dropdown menus, close buttons
- Isolation: Use
isolation: isolateon components to prevent z-index leaking
Common Mistakes
- Sticky not working? — Check if any ancestor has
overflow: hiddenoroverflow: auto. Sticky requires a scrollable ancestor without clipping. - Z-index wars (z-index: 9999) — Don't escalate. Create stacking contexts intentionally with
isolation: isolate. - Forgetting the positioned ancestor —
absolutepositions relative to the nearest ancestor with position set. Without one, it positions to the<body>. - Fixed elements blocking content — A fixed header overlaps content. Add
padding-topormargin-topequal to the header height on the body. - Using position for layout — Positioning is for overlays and special cases. Use Flexbox/Grid for page layout.
- Transform on parent breaks fixed — A
transformon any ancestor turnsfixedintoabsolute. This is a CSS spec behaviour, not a bug.
🎉 Lesson Complete
- ✅
sticky= locks element after scrolling past a threshold (needs top/bottom) - ✅
fixed= locked to viewport (FABs, navbars, cookie bars) - ✅
absoluteinsiderelative= precise placement within a container - ✅ Stacking contexts scope z-index to a parent —
isolation: isolatecreates one - ✅
transform,opacity < 1, andfilterall create stacking contexts - ✅ Fixed positioning breaks inside transformed parents
- ✅ Always add body padding to compensate for fixed headers
- ✅ Use positioning for overlays, not for page layout
Sign up for free to track which lessons you've completed and get learning reminders.