Fixed vs Sticky Position in CSS: Key Differences and Usage

The fixed position in CSS keeps an element fixed relative to the browser window, so it stays visible even when scrolling. The sticky position toggles between relative and fixed based on the scroll position, sticking the element only after it reaches a specified offset.

Quick Comparison

Here is a simple table comparing key aspects of fixed and sticky positions in CSS.

Aspect	Fixed Position	Sticky Position
Reference point	Viewport (browser window)	Nearest scrolling ancestor or viewport
Scroll behavior	Element stays fixed regardless of scroll	Element sticks after scrolling past a threshold
Space in layout	Removed from normal flow, overlaps content	Takes space until it sticks, then behaves like fixed
Use case	Persistent headers, floating buttons	Sticky headers, section titles
Browser support	Supported in all modern browsers	Supported in all modern browsers except some older versions
Requires offset (top, left, etc.)	No, but usually set for placement	Yes, to define stick point

Key Differences

The fixed position removes the element from the normal page flow and positions it relative to the browser window. This means the element stays visible in the same spot even when the user scrolls the page. Because it is removed from the flow, it can overlap other content and does not affect the layout of other elements.

In contrast, sticky position acts like relative until the element reaches a defined offset (like top: 0) during scrolling. At that point, it behaves like fixed and sticks in place. Before sticking, it occupies space normally, so it does not overlap content. This makes sticky useful for headers or menus that stay visible only after scrolling past them.

Another difference is that sticky requires a threshold offset to work, while fixed can be placed anywhere on the viewport. Also, sticky depends on the scroll container, so if the parent has overflow or no scroll, it may not stick as expected.

Code Comparison

This example shows a header that stays fixed at the top of the viewport using position: fixed.

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;
}

.content {
  height: 2000px;
  background: linear-gradient(white, lightgray);
}

Output

A green header bar fixed at the top of the browser window that stays visible when scrolling down a long page.

Sticky Position Equivalent

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

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;
}

.content {
  height: 2000px;
  background: linear-gradient(white, lightgray);
}

Output

A blue header bar that scrolls with the page but sticks to the top of the viewport once it reaches it, then stays visible while scrolling further.

When to Use Which

Choose fixed when you want an element to always stay visible on the screen, like a floating button or a persistent navigation bar that never moves. It is great for elements that must remain accessible regardless of scroll position.

Choose sticky when you want an element to scroll normally but then stick in place after reaching a certain point, such as section headers or menus that become fixed only when needed. This keeps the layout natural and avoids overlapping content until the stick point.

In summary, use fixed for constant visibility and sticky for conditional sticking based on scroll position.

Key Takeaways

fixed keeps elements always visible relative to the viewport, ignoring scroll.

sticky toggles between normal flow and fixed based on scroll position and offset.

fixed elements overlap content and are removed from layout flow; sticky elements take space until they stick.

Use fixed for persistent UI elements and sticky for headers or menus that stick after scrolling.

sticky requires an offset like top to work properly.