Interview Question

How do you create a sticky header?

Use position:sticky with an inset and an appropriate scrolling context.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

A sticky header uses sticky positioning with a block-start inset. • It behaves in normal flow until its scroll threshold is reached. • Its containing block and scrolling ancestor limit where it can stick. • A background and suitable stack level keep content readable beneath it.

💡 Simple Example

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: Canvas;
}

⚡ Quick Revision

Use position:sticky with an inset and an appropriate scrolling context.

←

PreviousHow do you create a responsive navbar?

NextHow do you implement dark mode?

→