Understanding position: sticky in CSS
position: sticky is a hybrid between relative and fixed. A sticky element behaves like relative until the user scrolls the page to a defined offset (top, left, right, or bottom). Once that threshold is reached, it behaves like fixed, sticking in place within its parent container.
Element is treated as
relativeuntil a scroll threshold is reached.Once threshold is reached, element sticks in place like
fixedbut only within its parent container.Unlike
fixed, sticky elements do not remain fixed to the viewport outside their container.Useful for headers, table headers, or in-page navigation that should stick temporarily while scrolling.
In this example, the .sticky-box scrolls with the page like a relative element until its top reaches the viewport top, then it sticks there until its parent container is scrolled out of view.
Ensure the parent container has sufficient height; sticky only works within its parent.
Use
top,left,right, orbottomto define the sticking threshold.Avoid sticky elements inside containers with
overflow: hidden,overflow: scroll, oroverflow: autoas it may break behavior.Combine with z-index to manage overlapping with other content.
Test across browsers; older browsers may require fallback styles.