0Pricing
CSS Academy · Lesson

Fixed and Sticky Positioning

Fix elements to the viewport or create scroll-sticky headers and sidebars.

position: fixed

A fixed element is positioned relative to the browser viewport and stays in place even when the page scrolls. It is also removed from the document flow.

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
}

Fixed Positioning Use Cases

Common uses for position: fixed:

  • Navigation bars that stay at the top
  • Floating action buttons (FABs)
  • Chat widgets at the bottom right
  • Cookie consent banners
  • Modal overlays

All lessons in this course

  1. Static and Relative Positioning
  2. Absolute Positioning and Containing Block
  3. Fixed and Sticky Positioning
  4. Z-index and Stacking Context
← Back to CSS Academy