Bird
Raised Fist0
CSSmarkup~5 mins

Position fixed and sticky in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does position: fixed; do to an element on a webpage?
easy
A. Keeps the element always visible in the same spot on the screen, even when scrolling.
B. Makes the element scroll normally with the page content.
C. Positions the element relative to its parent container.
D. Hides the element when the page is scrolled.

Solution

  1. Step 1: Understand fixed positioning

    Elements with position: fixed; stay in the same place on the screen regardless of scrolling.

  2. Step 2: Compare with other positions

    Unlike normal flow or relative positioning, fixed elements do not move when the page scrolls.

  3. Final Answer:

    Keeps the element always visible in the same spot on the screen, even when scrolling. -> Option A

  4. Quick Check:

    Fixed = Always visible on screen [OK]
Hint: Fixed means element stays put on screen during scroll [OK]
Common Mistakes:
  • Thinking fixed elements scroll with the page
  • Confusing fixed with relative positioning
  • Assuming fixed hides the element
2. Which of the following is the correct CSS syntax to make an element sticky at 10px from the top?
easy
A. position: relative; top: 10px;
B. position: fixed; top: 10px;
C. position: absolute; top: 10px;
D. position: sticky; top: 10px;

Solution

  1. Step 1: Identify sticky syntax

    The correct way to make an element sticky is using position: sticky; with an offset like top: 10px;.

  2. Step 2: Check other options

    Fixed keeps element always on screen, absolute positions relative to nearest positioned ancestor, relative moves element relative to normal spot.

  3. Final Answer:

    position: sticky; top: 10px; -> Option D

  4. Quick Check:

    Sticky syntax = position: sticky + offset [OK]
Hint: Sticky needs position sticky plus top/left/right/bottom [OK]
Common Mistakes:
  • Using fixed instead of sticky
  • Forgetting to add top offset
  • Using relative or absolute incorrectly
3. Given this CSS and HTML, what will happen when you scroll the page?
<style>
header {
  position: sticky;
  top: 0;
  background: lightblue;
  padding: 1rem;
}
</style>
<header>Sticky Header</header>
<div style='height: 2000px;'>Content</div>
medium
A. The header stays stuck at the top of the viewport when scrolling down.
B. The header scrolls away with the page content.
C. The header stays fixed at the bottom of the page.
D. The header disappears when scrolling starts.

Solution

  1. Step 1: Understand sticky with top: 0

    The header will scroll normally until it reaches the top of the viewport, then it sticks there.

  2. Step 2: Visualize scrolling effect

    As you scroll down, the header remains visible stuck at the top, making it easy to access.

  3. Final Answer:

    The header stays stuck at the top of the viewport when scrolling down. -> Option A

  4. Quick Check:

    Sticky + top:0 = sticks at top on scroll [OK]
Hint: Sticky sticks at offset after scrolling reaches it [OK]
Common Mistakes:
  • Thinking sticky behaves like fixed always
  • Assuming header scrolls away immediately
  • Confusing top: 0 with bottom positioning
4. You want a navigation bar to stay visible at the top when scrolling, but your CSS uses position: sticky; and it doesn't stick. What is a likely cause?
medium
A. You forgot to add position: fixed; instead.
B. The element has no width set.
C. The parent container has overflow: hidden; or overflow: auto;.
D. The element is inside a <footer> tag.

Solution

  1. Step 1: Check parent container overflow

    Sticky positioning requires the parent container not to clip overflow; overflow: hidden; or auto can prevent sticky from working.

  2. Step 2: Understand sticky requirements

    Sticky depends on scroll container; if parent clips overflow, sticky won't stick.

  3. Final Answer:

    The parent container has overflow: hidden; or overflow: auto;. -> Option C

  4. Quick Check:

    Sticky fails if parent clips overflow [OK]
Hint: Check parent overflow to fix sticky not working [OK]
Common Mistakes:
  • Switching to fixed without need
  • Ignoring parent container styles
  • Assuming tag type affects sticky
5. You want a sidebar that stays visible on the left side as you scroll down, but only after you scroll past its original position. Which CSS setup achieves this behavior?
hard
A. Use position: fixed; left: 0; on the sidebar.
B. Use position: sticky; top: 0; on the sidebar inside a tall container.
C. Use position: absolute; left: 0; top: 0; on the sidebar.
D. Use position: relative; left: 0; on the sidebar.

Solution

  1. Step 1: Understand sticky sidebar behavior

    Sticky lets the sidebar scroll normally until it reaches the top, then it sticks there, perfect for this use case.

  2. Step 2: Why not fixed or absolute?

    Fixed would always keep sidebar visible, ignoring scroll position. Absolute positions relative to container but doesn't stick on scroll.

  3. Final Answer:

    Use position: sticky; top: 0; on the sidebar inside a tall container. -> Option B

  4. Quick Check:

    Sticky = scroll then stick at offset [OK]
Hint: Sticky sticks after scrolling past original spot [OK]
Common Mistakes:
  • Using fixed which ignores scroll position
  • Using absolute which doesn't stick on scroll
  • Using relative which just shifts position