CSS position: fixed property value

CSS position Property

position: fixedis used in CSS positioning properties forFixed Positioningthe value. Elements using fixed positioning willTaken out of the document flow, relative tobrowser viewport(viewport) for positioning,and will not move with page scrolling。

This is the core technology for implementing fixed navigation bars, back-to-top buttons, sidebar ads, and other functions.

Word Definitions：fixedFrom Latinfixare, meaning "fixed, installed," indicating that once the element's position is determined, it will not change.

Basic Syntax

position: fixedNeed to be used withtop、right、bottom、leftproperty to specify the position relative to the viewport.

/* 语法 */
position: fixed;

/* 常用组合：固定在顶部 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}

/* 固定在右下角 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Core features

Feature 1: Relative to viewport positioning

Fixed positioning elementsNot affected by parent elements, always positioned relative to the visible area of the browser window.

Feature 2: Out of the document flow

andabsoluteLikewise,fixedelementDoes not occupy document space, surrounding elements will arrange normally,Ignoreignoring the existence of the fixed-positioned element.

Feature 3: Fixed, does not move with scrolling

This isfixedandabsoluteofKey difference: no matter how the page scrolls, fixed-positioned elements always remain at the specified position.

Feature 4: Activates z-index

Fixed positioning activatesz-indexproperty can control the stacking order of elements in the viewport.

Example

Let's gain a deeper understanding through examplesposition: fixedCharacteristics.

Example 1: Fixed top navigation bar

This isfixedThe most common application scenario: a fixed navigation bar.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

/* Fixed navigation bar at the top */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #2c3e50;
            color: white;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
            z-index: 1000;
        }

/* Main content area */
        .content {
padding-top: 80px; /* Avoid being blocked by the navigation bar */
            padding: 80px 20px 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .spacer {
height: 1500px; /* Create a long enough scrolling area */
        }

        .text-block {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="navbar">
Fixed Navigation Bar - Scroll Down to See the Effect
    </div>
    <div class="content">
        <h1>Fixed Positioning Example</h1>
        <p>This is a fixed navigation bar implemented using position: fixed.</p>
        <p>No matter how you scroll the page, the navigation bar stays at the top of the page.</p>
        <div class="text-block">
            <h2>Content Area 1</h2>
            <p>This is the first paragraph of content, used to fill the page to generate a scrollbar.</p>
        </div>
        <div class="text-block">
            <h2>Content Area 2</h2>
            <p>This is the second paragraph of content.</p>
        </div>
        <div class="text-block">
            <h2>Content Area 3</h2>
            <p>This is the third paragraph of content.</p>
        </div>
        <div class="text-block">
            <h2>Content Area 4</h2>
            <p>This is the content of area 4.</p>
        </div>
        <div class="spacer"></div>
    </div>
</body>
</html>

Example 2: Back-to-top button fixed at the bottom right corner

Fixed positioning is also commonly used to create "back-to-top" buttons:

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .content {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

/* The page is long enough to generate a scrollbar */
        .tall-content {
            height: 2000px;
        }

/* Button fixed at the bottom right corner */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s;
        }

        .back-to-top:hover {
            transform: scale(1.1);
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Back to Top Button Example</h1>
        <p>Scroll the page to see the effect of the fixed button.</p>
        <div class="tall-content"></div>
    </div>

    <div class="back-to-top" title="Back to Top">
        ↑
    </div>
</body>
</html>

Example 3: Fixed sidebar

Fixed positioning can also implement a fixed sidebar:

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

/* Main container: using grid layout */
        .container {
            display: grid;
            grid-template-columns: 1fr 200px;
            max-width: 1000px;
            margin: 0 auto;
            min-height: 2000px;
        }

        .main-content {
            padding: 20px;
            background-color: #ecf0f1;
        }

/* Fixed sidebar */
        .sidebar {
            position: fixed;
            top: 20px;
            right: calc(50% - 500px + 220px);
            width: 180px;
            background-color: #3498db;
            color: white;
            padding: 15px;
            border-radius: 4px;
        }

        .ad-banner {
            background-color: #e74c3c;
            padding: 10px;
            text-align: center;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .content-block {
            background-color: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-content">
            <h1>Main content area</h1>
            <p>This is the main content, which moves with the scrollbar.</p>
            <div class="content-block">
                <p>Content paragraph 1 - Fill the page to create a scrolling effect.</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 2</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 3</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 4</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 5</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 6</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 7</p>
            </div>
            <div class="content-block">
                <p>Content paragraph 8</p>
            </div>
        </div>

        <div class="sidebar">
            <div class="ad-banner">Advertisement space</div>
            <p>Fixed sidebar</p>
            <p>No matter how the main content scrolls, I always stay fixed on the right side.</p>
        </div>
    </div>
</body>
</html>

Example 4: Footer fixed at the bottom

Sometimes you need to fix a footer to the bottom on pages with little content:

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            font-family: Arial, sans-serif;
        }

        .content {
            flex: 1;
            padding: 40px 20px;
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }

/* Footer fixed at bottom */
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Page with little content</h1>
        <p>This page has very little content, but the footer is still fixed at the bottom.</p>
        <p>Implemented using flexbox's flex: 1 combined with position: fixed.</p>
    </div>

    <div class="footer">
        &copy;2026 EXAMPLE - Fixed Footer
    </div>
</body>
</html>

Example 5: Fixed overlay layer

Fixed positioning can also be used to create full-screen overlays:

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .open-btn {
            padding: 12px 24px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

/* Fixed overlay layer */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }

/* Hide overlay */
        .modal-overlay.hidden {
            display: none;
        }

/* Popup content */
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            text-align: center;
            max-width: 400px;
        }

        .modal-content h2 {
            margin-bottom: 15px;
        }

        .close-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Fixed Overlay Example</h1>
    <p>Click the button to open the popup.</p>

    <button class="open-btn" onclick="document.querySelector('.modal-overlay').classList.remove('hidden')">
Open Popup
    </button>

    <div class="modal-overlay hidden">
        <div class="modal-content">
            <h2>Welcome to EXAMPLE</h2>
            <p>This is an overlay popup created using fixed positioning.</p>
            <p>The overlay always covers the entire viewport and does not scroll with the page.</p>
            <button class="close-btn" onclick="document.querySelector('.modal-overlay').classList.add('hidden')">
Close
            </button>
        </div>
    </div>
</body>
</html>

Notes

Mobile compatibility issues:In iOS Safari and some mobile browsers,position: fixedthere may be compatibility issues. The element may move when the input field gains focus. Solutions include: using-webkit-position: fixedor settransform: translateZ(0)to enable hardware acceleration.

z-index level

Fixed positioning element'sz-indexis relative toViewportcalculated, not relative to the parent element.

Difference from absolute positioning

Features position: absolute position: fixed
positioning reference nearest positioned ancestor element Browser viewport
page scroll Moves as the page scrolls fixed and does not move
print normal display may not display or behave abnormally

Prevent fixed-positioned elements from being printed

@media print {
    .fixed-element {
        position: static;  /* 打印时取消固定定位 */
    }
}

Common application scenarios

Scenario 1: Fixed top navigation

.nav-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
}

Scenario 2: Fixed back button

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Scenario 3: Chat window

.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 400px;
}

Summary

position: fixedis the core technology for implementing fixed UI elements:

  • relative tobrowser viewportpositioning, not affected by the parent element
  • Fixed, does not move with page scrollingMove
  • elementTaken out of the document flow, does not occupy space
  • activatez-index, can control stacking order
  • Commonly used for fixed navigation bars, back-to-top buttons, fixed sidebars, and modal overlays
  • Pay attention to compatibility issues on mobile

CSS position Property

other extensions