What is Position fixed and sticky in CSS?

Position fixed and sticky in CSS - Syntax, Examples & Explanation

Introduction

Position fixed and sticky help you control where elements stay on the screen when you scroll. They make parts of your page easy to find and use.

Keep a menu visible at the top while scrolling a long page.

Make a button stay in the corner of the screen for quick access.

Keep a header visible until you scroll past it, then let it scroll away.

Fix a chat box so it stays on screen while reading messages.

Make a sidebar stay in place while scrolling through content.

Syntax

CSS

selector {
  position: fixed; /* or sticky */
  top: value; /* distance from top */
  left: value; /* distance from left */
  right: value; /* distance from right */
  bottom: value; /* distance from bottom */
}

fixed means the element stays in the same place on the screen, even when you scroll.

sticky means the element scrolls normally until it reaches a set position, then it sticks there.

Examples

This makes the header stay at the top of the screen always, even when you scroll down.

CSS

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
}

The navigation bar scrolls with the page but sticks to the top when it reaches it.

CSS

nav {
  position: sticky;
  top: 0;
  background-color: lightgray;
}

This button stays fixed in the bottom-right corner of the screen.

CSS

button {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

Sample Program

This page has a fixed header that stays visible at the top always. The navigation bar below it is sticky, so it scrolls until it reaches the top, then it sticks there. A button stays fixed in the bottom-right corner for quick access.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Fixed and Sticky Example</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      line-height: 1.5;
    }
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #007acc;
      color: white;
      padding: 1rem;
      text-align: center;
      font-weight: bold;
      z-index: 1000;
    }
    nav {
      position: sticky;
      top: 3.5rem; /* height of header + some space */
      background-color: #e0e0e0;
      padding: 0.5rem 1rem;
      font-weight: bold;
      border-bottom: 1px solid #ccc;
    }
    main {
      margin-top: 6rem; /* space for fixed header and nav */
      padding: 1rem;
    }
    .fixed-button {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      background-color: #007acc;
      color: white;
      border: none;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 1rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
  </style>
</head>
<body>
  <header>Fixed Header - Always Visible</header>
  <nav>Sticky Navigation - Sticks after header</nav>
  <main>
    <p>Scroll down to see how the header stays fixed at the top of the screen.</p>
    <p>The navigation bar will scroll with the page until it reaches the top, then it will stick there.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula ex eu augue cursus, a dapibus lorem blandit. Curabitur non justo nec nulla dapibus cursus. Integer at lorem nec nulla dapibus tincidunt. Sed euismod, urna at cursus blandit, lorem urna luctus elit, a tincidunt nulla lorem at sapien.</p>
    <p>More content to scroll...</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula ex eu augue cursus, a dapibus lorem blandit. Curabitur non justo nec nulla dapibus cursus. Integer at lorem nec nulla dapibus tincidunt. Sed euismod, urna at cursus blandit, lorem urna luctus elit, a tincidunt nulla lorem at sapien.</p>
    <p>Keep scrolling to see the sticky effect.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula ex eu augue cursus, a dapibus lorem blandit. Curabitur non justo nec nulla dapibus cursus. Integer at lorem nec nulla dapibus tincidunt. Sed euismod, urna at cursus blandit, lorem urna luctus elit, a tincidunt nulla lorem at sapien.</p>
  </main>
  <button class="fixed-button" aria-label="Contact support">Contact</button>
</body>
</html>

OutputSuccess

Important Notes

Use z-index with fixed or sticky elements to keep them above other content.

Sticky positioning works only if the parent has enough height to allow scrolling.

Fixed elements are removed from the normal page flow, so add margin or padding to avoid content hiding behind them.

Summary

Fixed keeps an element always visible in the same spot on the screen.

Sticky lets an element scroll normally until it reaches a position, then it sticks there.

Use these to improve navigation and keep important items easy to access.