CSS Sticky Positioning — CSS interactive lesson

CSS position: sticky

An element with position: sticky; toggles between a relative and fixed position, depending on the scroll position.

A sticky element is positioned relative until a certain scroll position is reached - then it "sticks" in that place (like position:fixed).

Note

You must specify at least one of the top , right , bottom or left properties, for sticky positioning to work.

In this example, when the sticky element reach the top of the page (top: 0), it sticks to this position:

Example

Formatted code

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Live preview

Sticky positioning is commonly used for

Sticky headers - Navigation bars that stick to the top when scrolling
Sticky sidebars - Side content that stays visible while scrolling main content
Sticky table headers - Table headers that remain visible when scrolling long tables

The key differences between sticky and fixed positioning:

Feature	position: sticky	position: fixed
Initial behavior	Acts like relative	Always fixed to viewport
Space in document	Takes up space initially	Does not take up space
Scroll behavior	Sticks after threshold	Always fixed
Container bound	Yes, respects parent boundaries	No, always relative to viewport

Property	Description
bottom	Sets the bottom margin edge for a positioned box
clip	Clips an absolutely positioned element
left	Sets the left margin edge for a positioned box
position	Specifies the type of positioning for an element
right	Sets the right margin edge for a positioned box
top	Sets the top margin edge for a positioned box