Fixed and Sticky Positioning

Compare a viewport layer with an element that sticks inside a scroll container

1. Sticky needs a scroll threshold

Scroll inside this stage. The dark heading sticks when it reaches top: 0.

Sticky section heading

Normal-flow item 1

Normal-flow item 2

Normal-flow item 3

Normal-flow item 4

Normal-flow item 5

2. Fixed follows the viewport

The orange note stays near the viewport corner while the document scrolls.

  1. Fixed elements leave normal flow.
  2. They can cover content, especially on small screens or at high zoom.
  3. Keep fixed controls small and preserve space around important content.

Sticky troubleshooting

  1. Set a threshold such as top: 0.
  2. Confirm there is enough content to scroll.
  3. Check which ancestor creates the scroll container.
  4. Inspect ancestor overflow when sticky seems inactive.
Fixed viewport note

Important CSS

Fixed stays on the viewport; sticky pins while scrolling.

.fixed-bar { position: fixed; top: 0; width: 100%; }
.sticky-label { position: sticky; top: 0; }