Interview Question

Difference between fixed and sticky positioning?

Fixed stays viewport-positioned; sticky sticks only within its scrolling limits.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Fixed and sticky positioning use different containing behavior. • A fixed box is normally positioned relative to the viewport and stays there while scrolling. • A sticky box behaves relatively until a scroll threshold is reached. • Sticky positioning needs an inset and is limited by its scroll container.

💡 Simple Example

.toolbar { position: sticky; top: 0; } .help { position: fixed; right: 1rem; bottom: 1rem; }

⚡ Quick Revision

Fixed stays viewport-positioned; sticky sticks only within its scrolling limits.