Most people blame the browser.
The real reason is parent overflow context.
Problem
.sidebar {
position: sticky;
top: 0;
}
Works… until it doesn’t.
Hidden cause
If ANY parent has:
overflow: hidden; overflow: auto; overflow: scroll;
Sticky breaks.
Why
position: sticky is calculated relative to the nearest scroll container, not the viewport.
Fix
.parent {
overflow: visible;
}
When to use sticky
-
Headers
-
Filters
-
Navigation panels
When NOT
-
Deeply nested layouts
-
Complex scroll containers