What is the difference between position: fixed and sticky?

Thanks to Claude for the give me great 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