Layout Fix

Fix position sticky not working.

If your sticky sidebar, header, filter bar, or table header refuses to stick, the problem is usually not sticky itself. It is usually a missing top value, a parent with overflow, or a layout context that prevents sticky behavior from ever activating.

Browse CSS Fixes See the Difference

Classic layout bug
Usually one hidden cause
Explained step-by-step

What the bug looks like

A sticky header scrolls away, a sidebar never sticks, or an element with position: sticky behaves exactly like relative.

Why it happens

Sticky depends on both the element and its surrounding layout. If the scroll container or parent rules are wrong, sticky never gets a chance to activate.

What usually fixes it

Add a proper offset, remove the wrong overflow from parents, and make sure the element actually has room to stick while the page scrolls.

Recommended base pattern

This is the clean starting point for most sticky headers, sidebars, and utility bars.

.sidebar {
  position: sticky;
  top: 24px;
}

Common broken version

.sidebar {
  position: sticky;
}

Why this fails

Sticky needs a threshold. Without something like top: 0;, the browser has no clear point where the element should start sticking.

Rule of thumb: if sticky is not working, check the offset first. It is the fastest win.

Fast practical rule

If sticky is failing, do not start by changing ten layout properties. First ask three questions: does it have top? does a parent have overflow? is there enough scroll area for sticky to visibly activate?

The overflow trap

One of the biggest sticky killers is a parent element with overflow: hidden, overflow: auto, or overflow: scroll.

Sticky works relative to its scroll container. If the wrong parent becomes that container, sticky can appear broken or can stop at the wrong place.

Common sticky-breaking parent

.layout {
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: 24px;
}

Debug checklist

Make sure the sticky element has an offset such as top: 0; or top: 24px;.
Inspect all parent elements for overflow: hidden, auto, or scroll.
Check whether the sticky element is inside a container that is too short to allow visible sticky movement.
If the sticky element is in a flex or grid layout, inspect alignment and height behavior.
Test whether transforms or unusual wrappers are changing the layout context in unexpected ways.

Best first move Add top and inspect parent overflow before touching anything else.

Most overlooked cause Sticky often “fails” because the parent is not tall enough for the behavior to become visible during scroll.

Clean mindset Sticky is a layout relationship, not just a property. Debug the container chain, not only the element itself.

Sticky inside grid or flex layouts

Sticky can work inside grid and flex layouts, but the surrounding structure matters. If the column height is weird, the parent is stretched oddly, or overflow rules are fighting the scroll area, sticky may look unreliable.

This is why a sticky sidebar that works in one layout can fail in another with almost the same code.

Safer sidebar pattern

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

Helpful test

.sticky-test {
  position: sticky;
  top: 0;
  background: white;
}

Why this helps

A simplified sticky test helps separate “sticky is broken” from “my layout is breaking sticky.” If the basic version works, the real problem is probably in the parent structure.

Want more fixes like this?

Browse more layout debugging guides or jump to the full fix library.

Browse CSS Fixes All Fixes

Fix position: sticky not working