Fixed vs Sticky in CSS: Key Differences and Usage Guide

In CSS, fixed positioning locks an element relative to the viewport, so it stays visible when scrolling anywhere on the page. sticky positioning toggles between relative and fixed based on scroll position, sticking only after reaching a defined offset within its container.

Quick Comparison

Here is a quick side-by-side comparison of fixed and sticky positioning in CSS.

Feature	fixed	sticky
Position reference	Viewport (browser window)	Nearest scrolling ancestor or viewport
Scroll behavior	Always stays fixed on screen	Sticks only after scrolling past threshold
Space in layout	Removed from normal flow	Occupies space until sticky activates
Use case	Persistent headers, floating buttons	Section headers, in-flow sticky elements
Support	All modern browsers	All modern browsers
Requires offset	No (top, bottom, left, right optional)	Yes (top, bottom, left, or right needed)

Key Differences

fixed positioning removes the element from the normal page flow and fixes it relative to the viewport. This means the element stays visible at the same spot on the screen even when the user scrolls anywhere on the page. It does not move with the page content and ignores parent containers.

In contrast, sticky positioning acts like relative until the element reaches a specified offset (like top: 0) during scrolling. At that point, it behaves like fixed and sticks in place. Once the user scrolls back above that point, it returns to normal flow. Sticky elements remain within their parent container boundaries and only stick inside that area.

Another key difference is layout space: fixed elements do not take up space in the page layout, so other content can move underneath them. Sticky elements take up space until they stick, preserving layout flow and preventing overlap until activated.

Code Comparison

This example shows a header fixed to the top of the viewport using fixed positioning.

css

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 1rem;
  font-size: 1.5rem;
  z-index: 1000;
}

body {
  margin: 0;
  padding-top: 60px; /* space for fixed header */
  font-family: Arial, sans-serif;
}

main {
  padding: 1rem;
  height: 200vh; /* tall content to enable scrolling */
}

Output

A green header bar fixed at the top of the browser window that stays visible while scrolling the tall page content below.

Sticky Equivalent

This example shows a header that sticks to the top only after scrolling past it, using sticky positioning.

css

header {
  position: sticky;
  top: 0;
  background-color: #2196F3;
  color: white;
  padding: 1rem;
  font-size: 1.5rem;
  z-index: 1000;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

main {
  padding: 1rem;
  height: 200vh; /* tall content to enable scrolling */
}

Output

A blue header bar that scrolls with the page initially but sticks to the top of the viewport once it reaches it during scrolling.

When to Use Which

Choose fixed when you want an element to always stay visible on the screen regardless of scrolling, such as a navigation bar or a floating action button. It is great for persistent UI elements that must remain accessible at all times.

Choose sticky when you want an element to scroll normally with the page but then stick in place once it reaches a certain scroll position. This is useful for section headers or menus that should stay visible only while their container is in view, preserving natural flow and avoiding overlap.

In summary, use fixed for constant visibility and sticky for conditional, scroll-based sticking within a container.

Key Takeaways

fixed locks an element to the viewport, always visible during scrolling.

sticky toggles between relative and fixed, sticking only after scrolling past a threshold.

fixed elements are removed from layout flow; sticky elements occupy space until they stick.

Use fixed for persistent UI elements and sticky for scroll-dependent sticking.

Both are widely supported and require specifying offsets like top for proper behavior.