What is the difference between position: fixed and sticky?

Thanks to Claude for the give me great demo.

Interactive Demo: Position Fixed vs Sticky

Try the live demo to see the difference between fixed and sticky positioning in action.

Open Interactive Demo

In the demo above:

  • The red box (Fixed) stays in the top-right corner no matter what
  • The teal box (Sticky) in the left demo starts normally, then sticks to the top when you scroll past it
  • The gray box shows normal scrolling behavior for comparison

Try scrolling both the individual boxes AND the entire page to see how they behave differently!

Position: Fixed 📌

  • Stays in one spot forever - The element is positioned relative to the viewport (browser window) and never moves, no matter how much you scroll
  • Completely removed from document flow - Other elements act like it doesn't exist
  • Always visible (if within viewport coordinates)
  • Common uses: Floating action buttons, chat widgets, persistent navigation bars

Position: Sticky 🍯

  • Hybrid behavior - Starts as a normal element, then "sticks" when you scroll past a certain point
  • Remains in document flow - Takes up space like a normal element initially
  • Sticks within its container - Only sticky while its parent container is visible
  • Common uses: Table headers, section headings, sidebar menus that follow you

Quick Visual Summary:

FIXED:     Always at same viewport position
           ┌─────────────┐
           │   Fixed     │ ← Never moves
           └─────────────┘

STICKY:    Normal → Sticks when scrolled past → Normal again
           ┌─────────────┐
           │   Sticky    │ ← Moves until threshold,
           └─────────────┘   then sticks