How to use CSS position static, relative, absolute, fixed, and sticky

Short answer

CSS position controls how an element is placed in the document. The values are static (default), relative, absolute, fixed, and sticky.

Key differences

• static: Default flow; top/left/right/bottom have no effect.
• relative: Offset from its normal position without removing it from the flow.
• absolute: Removed from flow; positioned relative to the nearest positioned ancestor.
• fixed: Removed from flow; positioned relative to the viewport.
• sticky: Toggles between relative and fixed based on the scroll position within its container.

Example

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
}

.banner {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

When to use each

• Use relative for small nudges and creating a positioning context for absolute children.
• Use absolute for overlays, dropdowns, and tooltips inside a positioned parent.
• Use fixed for navbars or chat widgets that must stay visible.
• Use sticky for section headers that pin while scrolling.