Sticky Positioning
position: sticky behaves like relatively positioned content until a scroll threshold is reached, after which it sticks within its containing scroll context.
Sticky positioning is useful for table headers, side navigation, filters, and section headings. Ancestor overflow settings can affect sticky behavior.
Sticky Positioning
Sticky Sidebar
.sidebar {
position: sticky;
inset-block-start: 1rem;
align-self: start;
}💡 The sidebar remains in normal flow but sticks when scrolling reaches the specified inset.
Key Takeaways
stickycombines normal-flow positioning with scroll-based sticking.- Containing blocks and ancestor overflow can affect sticky behavior.
Knowledge Check
What is a typical use case for `position: sticky`?