Fixing a Header in Place with position: sticky

In this lesson you'll learn how to fix a header in place using position: sticky, so you can understand how to keep a heading visible while scrolling. This is for people searching "CSS position sticky usage."

position: sticky is a positioning method where an element normally sits in its regular spot, but sticks in place once you scroll it to the edge of the screen. This is often used when you want a heading or header to always stay visible.

The sample code specifies overflow-y: scroll; inside .box, and position: sticky; top: 0; on the h3 heading inside it. Scroll inside the box, and confirm how the heading stays stuck to the top while only the body text scrolls past.

A common beginner stumbling block is a case where position: sticky doesn't seem to work. If the parent element has overflow: hidden specified, or if you forget a position value like top, it won't behave as intended. Unlike fixed, which is always fixed, its distinguishing feature is having both "its original position" and "its fixed position" as properties.

This comes in handy for keeping a table's header row always visible, or having a sidebar follow along as you scroll. On a page with long content, it also has the effect of making it easier for a user to keep track of where they currently are.