CSS position: sticky - How It Works, With Examples

How CSS sticky positioning behaves

A sticky element stays in normal flow and keeps its space in the layout. It scrolls with the page until its offset threshold is crossed, then pins relative to its nearest scrolling ancestor. It is always constrained to its containing block: when the parent's bottom edge reaches it, the sticky element is pushed back out of view.

.toolbar {
  position: sticky;
  top: 0; /* the threshold: stick when the top edge reaches 0px */
}

You must set a threshold offset

Sticky does nothing without at least one of top, right, bottom or left (or the logical inset-block-start / inset-inline-start). The offset is the distance from the scroll container's edge where the element stops and sticks. If your page already has a fixed header, add its height so the two don't overlap.

:root { --header-h: 64px; }

.site-header { position: fixed; top: 0; height: var(--header-h); }

.section-nav {
  position: sticky;
  top: var(--header-h); /* sit just below the fixed header */
}

h2[id] { scroll-margin-top: calc(var(--header-h) + 48px); }

Sticky header in CSS

The most common use: a header that scrolls in with the page and then stays at the top. Give it a background (otherwise content shows through as it scrolls under) and a z-index so later positioned elements don't paint over it. Put it as a direct child of body or of a tall page wrapper, so its container is the full page.

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
}

Sticky sidebar with grid or flexbox

A sticky sidebar or table of contents is where most people hit the stretch trap. Grid and flex items stretch to the full height of the row by default, so the sidebar is already as tall as its container and has no room to travel. Set align-self: start so the sidebar is only as tall as its content.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}

.toc {
  position: sticky;
  top: 80px;
  align-self: start;           /* without this the item stretches and never sticks */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
}

Sticky table headers and first columns

Put position: sticky on the th cells, not on the table. For a scrollable table, wrap it in a container with a fixed height and overflow: auto, so that wrapper becomes the scroll container the headers stick to. A sticky first column works the same way with left: 0.

.table-wrap { max-height: 420px; overflow: auto; }

table { border-collapse: separate; border-spacing: 0; }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 0 -1px 0 #e5e7eb;
}

tbody th { position: sticky; left: 0; background: #fff; z-index: 1; }
thead th:first-child { left: 0; z-index: 3; }

position: sticky vs position: fixed

Both pin an element while scrolling, but they solve different problems. Pick fixed when the element must be visible everywhere regardless of layout, and sticky when it belongs to a section of the page.

The container rules that make or break sticky

Most sticky failures come from an ancestor, not the element itself. Any ancestor between the sticky element and the page with overflow hidden, auto or scroll becomes its scroll container, and the element only sticks inside that box. overflow: clip is the exception: it clips without creating a scroll container, so sticky keeps working.

• Why position: sticky is not working (8 fixes)
• Debug CSS layout issues faster

Test sticky behavior at every width at once

Sticky bugs are usually viewport bugs: a header that is fine on desktop covers the content on a short phone screen, or a sidebar keeps sticking after the layout stacks. Sizzy shows your localhost on phones, tablets and desktops side by side with scrolling synced, so you see every sticky element engage and release at every breakpoint in a single scroll.

• See Sizzy pricing and plans
• Get Sizzy