Fixed Positioning for Sticky Elements

Have you ever scrolled down a web page and noticed a menu, button, or bar that stays in the same place on your screen? That’s called a sticky element, and one of the easiest ways to create it is with CSS fixed positioning.

In this beginner-friendly guide, you’ll learn what fixed positioning is, how it works, and how to build your own simple sticky elements step by step. You don’t need any previous coding experience—just a little curiosity and a web browser.

What is “fixed positioning”?

Web pages are built with three main languages:

HTML – the structure (the content and elements on the page)
CSS – the style (colors, sizes, positions)
JavaScript – the behavior (interactivity, animations, etc.)

Fixed positioning is a CSS technique that tells the browser: “Keep this element in the same spot on the screen, even when the user scrolls.”

That’s how you get:

Menus that stay at the top of the page
“Back to top” buttons that hover in the corner
Sticky promo bars or alerts that are always visible

We’ll focus on using CSS to control this behavior.

Getting set up (no special tools needed)

You can follow along with just:

A web browser (Chrome, Firefox, Edge, Safari, etc.)
A plain text editor (Notepad, TextEdit, VS Code, etc.)

How to test your code

Open your text editor.
Copy one of the examples into a new file.
Save the file as index.html on your computer.
Double-click index.html to open it in your browser.

You’re now “coding” a web page!

Example 1: Your first fixed header

Let’s start with a simple sticky header that stays at the top of the page while you scroll.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Fixed Header Example</title>
  <style>
    /* Make the page tall so we can scroll */
    body {
      margin: 0; /* Remove default page margin */
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* This is our sticky header */
    .fixed-header {
      position: fixed;   /* Makes the header stay in place */
      top: 0;            /* Stick it to the top of the screen */
      left: 0;           /* Align with the left edge */
      width: 100%;       /* Make it full width */
      background: #333;  /* Dark background color */
      color: #fff;       /* White text */
      padding: 15px;     /* Space inside the header */
    }

    /* Add some content so we can scroll */
    .content {
      margin-top: 80px;  /* Push content down so it's not under the header */
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="fixed-header">
    I am a fixed header. I stay at the top when you scroll!
  </div>

  <div class="content">
    <p>Scroll down to see the header stay in place.</p>
    <p>Lorem ipsum text repeated to create scrollable content...</p>
    <p>Keep adding more paragraphs here to make the page longer.</p>
    <p>More content... More content... More content...</p>
    <p>Even more content so you have to scroll the page.</p>
  </div>
</body>
</html>

What’s happening here?

position: fixed; tells the browser to keep .fixed-header in the same place on the screen, not just on the page.
top: 0; left: 0; pins it to the top-left corner.
width: 100%; makes it stretch across the whole screen.
margin-top: 80px; on .content moves the content down so it doesn’t hide behind the header.

What you should see

When you open this file and scroll, the header bar stays at the top of your screen while the rest of the content moves under it.

Try it yourself:

Change the background color of .fixed-header to something else, like background: steelblue;, then refresh the page. Small experiments like this build confidence.

Example 2: A fixed “Back to top” button

Next, let’s create a little button in the corner of the screen that always stays there when you scroll.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Fixed Button Example</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
    }

    /* Lots of text so we can scroll */
    .long-content p {
      margin-bottom: 20px;
    }

    /* Our fixed button */
    .back-to-top {
      position: fixed;   /* Stay in place on scroll */
      right: 20px;       /* 20px from the right edge */
      bottom: 20px;      /* 20px from the bottom edge */
      background: #007bff;
      color: #fff;
      padding: 10px 15px;
      border-radius: 5px;
      text-decoration: none;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- This anchor is the top of the page -->
  <a id="top"></a>

  <h1>Scroll Down the Page</h1>
  <div class="long-content">
    <p>Lots of text here... (copy this paragraph many times).</p>
    <p>More content so you can scroll down the page.</p>
    <p>Keep going, keep scrolling...</p>
    <p>Even more sample content here.</p>
    <p>Add as many paragraphs as you like.</p>
  </div>

  <!-- Fixed button that links back to the top -->
  <a href="#top" class="back-to-top">Back to top</a>
</body>
</html>

How this works

The #top anchor (<a id="top"></a>) marks the top of the page.
The button (<a href="#top" class="back-to-top">) links back to that anchor.
position: fixed; right: 20px; bottom: 20px; keeps the button in the bottom-right corner, always visible.

Try it yourself:

Change bottom: 20px; to top: 20px; and see how the button moves.
Try left: 20px; bottom: 20px; to place it in the bottom-left corner.

Experimenting with top, right, bottom, and left is the best way to understand positioning.

Example 3: Fixed navigation bar with multiple links

Now let’s combine what we’ve learned into a basic sticky navigation bar that lets you jump to different sections of the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Fixed Navigation Example</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* Fixed navigation bar at the top */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #222;
      color: #fff;
      padding: 10px 20px;
    }

    .nav a {
      color: #fff;
      margin-right: 15px;
      text-decoration: none;
      font-size: 14px;
    }

    /* Add top margin so content appears below the nav */
    .page-content {
      margin-top: 60px;
      padding: 20px;
    }

    section {
      margin-bottom: 80px;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>

  <div class="page-content">
    <section id="home">
      <h2>Home</h2>
      <p>This is the home section. Scroll down to see more.</p>
    </section>

    <section id="about">
      <h2>About</h2>
      <p>This is the about section. The navigation stays fixed.</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>This is the contact section. Click the links to jump.</p>
    </section>
  </div>
</body>
</html>

What’s new here?

The .nav bar is fixed at the top, just like our first header example.
The links (href="#home", href="#about", etc.) jump to sections of the page with matching id values (id="home", id="about").
margin-top: 60px; on .page-content stops the content from hiding behind the fixed nav.

Try it yourself:

Add a new section:

Add another link: <a href="#services">Services</a> in the .nav.
Add a new section:

<section id="services">
  <h2>Services</h2>
  <p>Details about services go here.</p>
</section>

You’ve just extended your sticky navigation!

Common fixed positioning tips for beginners

Here are a few helpful reminders as you practice:

Always think about overlap
Fixed elements sit on top of the normal content. Use margin-top or padding-top on your main content so it doesn’t hide behind your fixed header.
Use top, right, bottom, left to place elements
- top: 0; pins the element to the top edge.
- bottom: 0; pins it to the bottom edge.
- Combine them with left or right to pick a corner.
Keep it simple at first
Start with one fixed element on the page. Once you’re comfortable, you can add more.
Check on smaller screens
A fixed header that’s too tall can cover too much content on phones. Try reducing padding or font size for smaller screens later on.

Quick recap and what’s next

You’ve learned how to:

Use position: fixed; in CSS to create sticky elements
Pin elements to the top, bottom, or corners of the screen
Build a fixed header, a floating “Back to top” button, and a simple sticky navigation bar
Avoid common issues like content hiding under a fixed bar by adding top margins

If this felt challenging, that’s completely normal. Every new line of code you try is a win. You’ve already built three real examples using HTML and CSS—great progress for a beginner.

What’s next?

Play more with colors, sizes, and positions in these examples.
Try combining fixed elements with simple animations (like hover effects).
Look up position: sticky; (a related CSS feature) to see another way to create sticky headers that only “stick” after scrolling.

Keep experimenting, keep breaking things, and keep fixing them. That’s exactly how developers learn—and you’re already on your way.

Mudzinga