CSS Sticky: Browser Support, How It Works, Fixes

What is CSS Sticky?

CSS Sticky is the position: sticky value defined in the W3C CSS Positioned Layout Module Level 3 specification. An element with this value flows with the page like a relatively positioned box, then sticks to its nearest scrolling ancestor once the scroll position crosses a threshold set by top, right, bottom, or left.

Which browsers does CSS Sticky support?

CSS Sticky works in every major modern browser, with full unprefixed support in Chrome 56+, Edge 16+, Firefox 32+, Safari 13+ on macOS and iOS, Opera 42+, and Samsung Internet 6.2+. Internet Explorer never added it.

How does CSS position: sticky work?

A sticky element behaves like a relatively positioned element until its computed scroll position crosses the threshold you set, and then the browser pins it to that side of the nearest scrolling ancestor for the rest of the scroll.

The browser walks up the DOM tree to find the nearest ancestor whose overflow property is scroll, auto, hidden, or overlay. That ancestor becomes the sticky element's scrolling container, and the element is pinned inside that container only, not the entire viewport. When the user scrolls past the bottom of the container, the sticky element scrolls away with it because it never leaves normal document flow.

A sticky element always creates a new stacking context, which keeps z-index conflicts predictable. At least one of top, right, bottom, or left must be set to a non-auto value for the axis you want to stick on; if both inset properties on an axis are auto, the element behaves like position: relative on that axis.

Use this snippet in the DevTools console to confirm that the current browser supports position: sticky:

// Run in the DevTools console to test position: sticky support.
const probe = document.createElement("div");
const test = (value) => {
  probe.style.position = "";
  probe.style.position = value;
  return probe.style.position === value;
};

const unprefixed = test("sticky");
const webkitPrefixed = test("-webkit-sticky");

console.log("Unprefixed sticky:", unprefixed ? "yes" : "no");
console.log("-webkit-sticky:", webkitPrefixed ? "yes" : "no");

if (!unprefixed && !webkitPrefixed) {
  console.warn("This browser falls back to position: static.");
}

If both checks return no, the browser will silently fall back to position: static and ignore the inset values. The most common false-negative is a typo in the property string, so always log both the unprefixed and the -webkit-sticky probes when you debug.

What are the common reasons CSS Sticky doesn't work?

Most position: sticky failures are layout problems, not browser bugs. The element stays in normal flow because one of the conditions the spec requires is not met by the parent chain or the inset values.

• No inset value is set: position: sticky needs at least one of top, right, bottom, or left set to a non-auto value. Without an inset, the browser has no threshold and the element behaves like position: relative.
• An ancestor has overflow set: If any parent up the tree has overflow: hidden, auto, or scroll, that parent becomes the scrolling container. The sticky element is pinned inside that container, which often clips it before it can stick. Replace overflow: hidden with overflow: clip on parents that should not scroll.
• The scrolling parent has no height: A sticky element pinned inside a parent that is the same height as the element has no scroll room to move through. Set an explicit height or min-height on the parent so the user can scroll past the sticky element.
• The sticky element is taller than its container: When the sticky element is taller than its scrolling ancestor, the inset threshold can never be reached and the element scrolls away with the page.
• Flex or grid stretching kills the stick: A flex or grid parent with align-items: stretch (the default) will stretch the sticky element to fill the parent height, which makes it taller than its scrolling area. Set align-self: start on the sticky child to stop the stretch.
• A higher-specificity rule overrides position: A later or more specific selector that sets position: relative, absolute, or fixed on the same element wins. Inspect the computed style in DevTools to confirm position: sticky is the active value.
• Old Safari needs the prefix: Safari 12 and earlier on macOS and iOS only accept -webkit-sticky. Ship both declarations in source order: -webkit-sticky first, then sticky.

In my experience, the overflow trap is the failure that wastes the most engineering time. A reset stylesheet from a UI kit or a layout grid often sets overflow: hidden on a wrapper three or four levels up the tree, and DevTools will not flag it as the cause because the sticky element itself looks correct. When sticky silently fails, walk every ancestor up to the body and check each computed overflow value before changing anything else.

What are the use cases of CSS Sticky?

CSS Sticky replaces a long list of JavaScript scroll listeners with a single CSS declaration, which is why product teams reach for it in nearly every modern interface. The pattern delivers smooth scroll-pinning at native frame rates with no event handlers.

• Sticky site headers and navigation: The top navigation bar pins to the viewport on scroll, keeping the search bar and primary links one click away on long marketing pages, blog posts, and dashboards.
• Sticky table headers: Long data tables keep their column headers visible by setting position: sticky and top: 0 on the thead row, so users always see what each column means while they scan rows.
• Sidebar and table-of-contents rails: Documentation sites pin a left or right sidebar to the viewport while the main content scrolls, giving readers persistent navigation without a fixed-position layout shift.
• Section labels in a long feed: Chat apps, calendars, and product catalogs use sticky date or category labels that change as the user scrolls past each section, mirroring the iOS contacts list pattern.
• Form action bars: A Save or Submit button row pinned to the bottom of a long form keeps the primary action visible without using position: fixed and avoiding the keyboard-overlap bug on mobile.
• Pricing and comparison tables: The first column of a wide comparison table can stick to the left so feature names stay visible while users scroll horizontally through plan columns.

Citations

All CSS Sticky version numbers and platform notes in this guide come from these primary sources:

• W3C - CSS Positioned Layout Module Level 3: w3.org/TR/css-position-3
• MDN Web Docs - position CSS property: developer.mozilla.org/en-US/docs/Web/CSS/position
• MDN Web Docs - position browser compatibility data: github.com/mdn/browser-compat-data/blob/main/css/properties/position.json
• Chrome for Developers - position:sticky is back in Chrome: developer.chrome.com/blog/position-sticky
• WebKit - feature status: webkit.org/status
• Mozilla Hacks - Firefox 32 release announcement: hacks.mozilla.org/2014/09/firefox-32
• Microsoft Learn - Microsoft Edge release notes: learn.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel
• Apple Developer - Safari 13 release notes: developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
• Wikipedia - CSS: en.wikipedia.org/wiki/CSS
• Polypane - Getting stuck: all the ways position:sticky can fail: polypane.app/blog/getting-stuck-all-the-ways-position-sticky-can-fail