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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 1000;
}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:
body {
padding-top: 64px; /* same as nav height */
}
.nav {
position: fixed;
top: 0;
height: 64px;
}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.
.table-header th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}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:
/* Sticks at top */
.header { position: sticky; top: 0; }
/* Sticks at bottom */
.footer { position: sticky; bottom: 0; }
/* Side sticky in a scroll container */
.sidebar { position: sticky; top: 20px; }Sticky Table Headers
Sticky is perfect for table headers in scrollable table wrappers — the header stays visible as the user scrolls through rows.
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
thead th {
position: sticky;
top: 0;
background: #f4f4f4;
}Sticky Sidebar Pattern
A classic sticky sidebar that stays in view as the main content scrolls:
.sidebar {
position: sticky;
top: 80px; /* below nav */
align-self: start;
max-height: calc(100vh - 80px);
overflow-y: auto;
}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.
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, and the CSS Academy course includes 4 lessons in total. 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.
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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
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