Sticky sidebar (position: sticky)

A sticky sidebar scrolls normally until it reaches a chosen inset, then parks there while the neighboring content continues. Unlike a fixed sidebar, it remains in the layout and stops when the bottom of its containing block arrives.

Use it for article tables of contents, product filters, checkout summaries, and actions that stay useful deep into a page. The contents list that follows you down an MDN or Tailwind docs page is the pattern at its most ordinary. CSS needs position: sticky plus a top value, and a grid or flex item usually needs align-self: start so it does not stretch to the height of its row.

Gotcha: sticky is bounded by its ancestors. A parent with overflow: hidden, auto, or scroll can become the scrolling box, and a sidebar taller than the viewport has nowhere useful to stick. Keep the ancestor chain intentional, cap tall sidebars, and test keyboard focus inside any independently scrolling filter list.