Fixed and Sticky Positioning
Fix elements to the viewport or create scroll-sticky headers and sidebars.
Fixed and Sticky Positioning is a free CSS Academy lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
position: fixed
A fixed element is positioned relative to the browser viewport and stays in place even when the page scrolls. It is also removed from the document flow.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Fixed Positioning Use Cases
Common uses for position: fixed:
- Navigation bars that stay at the top
- Floating action buttons (FABs)
- Chat widgets at the bottom right
- Cookie consent banners
- Modal overlays
Compensating for Fixed Headers
Fixed headers overlap content below them. Add top padding or margin equal to the header height to push content down:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Transforming Parents and Fixed
A critical quirk: if a parent element has a CSS transform, perspective, or filter applied, fixed positioning becomes relative to that parent, not the viewport. This is a common bug.
position: sticky
position: sticky is a hybrid: the element scrolls normally until it hits a defined threshold (e.g. top: 0), then it sticks in place within its parent container.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
Sticky Requires a Scrollable Parent
The sticky element sticks within its containing block. If the parent is not tall enough to scroll, sticky has no effect. The parent must have overflow not set to hidden.
Top Right Bottom Left for sticky
You must define at least one offset for sticky to activate. Common patterns:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Sticky Table Headers
Sticky is perfect for table headers in scrollable table wrappers — the header stays visible as the user scrolls through rows.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Sticky Sidebar Pattern
A classic sticky sidebar that stays in view as the main content scrolls:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Fixed vs Sticky Summary
Key differences:
- Fixed: always relative to viewport, always out of flow
- Sticky: scrolls with content until threshold, stays in flow, stops at parent boundary
Performance: Fixed and Layers
Fixed elements create a new stacking context and may trigger layout on scroll if they overlap repaint areas. Keep fixed elements simple and avoid expensive properties like box-shadow on them.
Quick Check
What constraint does position: sticky have that position: fixed does not?
Recap
position: fixed anchors elements to the viewport for sticky navigation and overlays. position: sticky scrolls normally until a threshold and then sticks — perfect for table headers and sidebars. Both require at least one offset property to activate sticking.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Fixed and Sticky Positioning” lesson free?
Yes — the full text of “Fixed and Sticky Positioning” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.
What will I learn in “Fixed and Sticky Positioning”?
Fix elements to the viewport or create scroll-sticky headers and sidebars. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Fixed and Sticky Positioning” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Static and Relative Positioning
- Absolute Positioning and Containing Block
- Fixed and Sticky Positioning
- Z-index and Stacking Context