w3tweaks.com · CSS Tutorial

CSS position: sticky

See when it works, when it silently breaks, and real-world use cases.

Tab 1

Static vs Sticky — Scroll to See the Difference

Both boxes have a header row. The left one uses normal flow — the header scrolls away. The right one uses position: sticky; top: 0 — the header locks to the top as you scroll.

❌ No sticky — header scrolls away
CSS Tutorials
1 z-index & Stacking Contexts
2 CSS position: sticky
3 ::before and ::after Guide
4 CSS object-fit & object-position
5 CSS calc() Explained
6 CSS Specificity Deep Dive
7 CSS Selectors Guide
8 CSS @font-face
9 scroll-snap Tutorial
10 CSS clip-path Shapes
✅ position: sticky — header locks in place
📌 CSS Tutorials (sticky)
1 z-index & Stacking Contexts
2 CSS position: sticky
3 ::before and ::after Guide
4 CSS object-fit & object-position
5 CSS calc() Explained
6 CSS Specificity Deep Dive
7 CSS Selectors Guide
8 CSS @font-face
9 scroll-snap Tutorial
10 CSS clip-path Shapes
How it works: A sticky element behaves like position: relative until it hits the threshold you define (top, bottom, left, or right), then it locks in place like position: fixed — but only within its parent container.
Tab 2

The 3 Traps That Silently Break Sticky

position: sticky stops working for non-obvious reasons. These are the three most common traps — each one is demonstrated live so you can see exactly what happens.

TRAP 1 Parent has overflow: hidden
Broken
📌 Sticky Header
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Fixed
📌 Sticky Header
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
overflow: hidden (or auto, scroll) on any ancestor creates a new scroll container — sticky positions relative to that, not the page. Remove it or use overflow: clip instead.
TRAP 2 No top / bottom value set
Broken
❌ Sticky (no top)
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Fixed
✅ top: 0 set
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Sticky requires at least one of top, bottom, left, or right. Without it the element stays in normal flow and never sticks. This is the #1 most common mistake.
TRAP 3 Parent container is too short
Broken
📌 Sticky elem
Only 1 row — parent too short, nowhere to stick
Other section content...
More content below...
Even more content...
Last row
Fixed
📌 Sticky elem
Row 1 of many...
Row 2 of many...
Row 3 of many...
Parent is tall — sticky works ✓
Sticky only activates while scrolling within its parent. If the parent is barely taller than the sticky element itself, there's no room to scroll and it never sticks.
Quick diagnosis: If sticky isn't working — check in this order: (1) Is top/bottom set? (2) Does any ancestor have overflow set to anything other than visible? (3) Is the parent container tall enough to have scrollable space?
Tab 3

Real-World Use Cases

Three patterns you'll use on almost every project. Scroll inside each demo to see sticky in action.

Scroll inside the page simulation — the nav locks to the top after the hero section scrolls away.

w3tweaks.com

Free frontend tutorials — CSS, JS, HTML and more

CSS
JavaScript
HTML
Guide

CSS position: sticky

The sticky nav above uses position: sticky; top: 0. It scrolls with the page until the hero section exits the viewport, then locks in place.

CSS z-index & Stacking Contexts

Understanding stacking contexts is essential before using sticky — the nav needs a z-index to float above content as you scroll past cards and sections.

CSS Custom Properties

CSS Variables let you define your sticky offset once and reuse it across the whole codebase — avoiding magic numbers spread across multiple files.

CSS Grid Layout

Grid is the ideal companion for sticky sidebars — it gives the sidebar a fixed column width while the main content area grows to fill remaining space.

Scroll the left content area — the Table of Contents sidebar stays visible and locked to the top.

CSS position: sticky — Full Guide

A sticky element behaves like position: relative until it reaches a defined scroll offset, then locks in place like position: fixed — but stays constrained within its parent.

How it works

The key rule: sticky only works within its scroll container. The parent must be taller than the sticky element and the scroll must happen through that parent (or the page itself).

Common traps

The three silent killers: missing top value, a parent with overflow: hidden, and a parent that's not tall enough. Every single sticky bug comes down to one of these three.

Browser support

Supported in all modern browsers since 2017. Safari requires no prefix since Safari 13. Safe to use in production with no polyfill.

📋 Contents
How it works Common traps Real use cases Browser support Key takeaways FAQ

Scroll down inside the table — the header row sticks to the top so column labels stay visible.

Tutorial Category Read Time Difficulty
z-index & Stacking ContextsCSS12 minIntermediate
position: sticky ExplainedCSS10 minBeginner
::before & ::after GuideCSS8 minBeginner
CSS object-fit GuideCSS6 minBeginner
CSS calc() ExplainedCSS9 minBeginner
CSS Specificity Deep DiveCSS14 minIntermediate
CSS scroll-snap TutorialCSS11 minIntermediate
CSS clip-path ShapesCSS10 minIntermediate
CSS filter & backdrop-filterCSS12 minIntermediate
CSS Dark Mode GuideCSS9 minIntermediate
CSS Container QueriesCSS12 minAdvanced
CSS :has() SelectorCSS10 minAdvanced
Full tutorial at w3tweaks.com/css/css-position-sticky-explained/