CSS Position Fixed

Last Updated : 17 Aug 2026

The position: fixed value is used to keep an element in a fixed position relative to the browser viewport. The element remains in the same position even when the user scrolls the webpage.

It is commonly used for navigation bars, headers, floating buttons, sidebars, and other interface elements that should remain visible while the page content is being scrolled.

In this chapter, you will learn what position: fixed is, how to use it with positioning properties, how to create fixed elements, and how it behaves when the webpage is scrolled.

What is CSS Position Fixed?

The position: fixed property removes an element from the normal document flow and positions it relative to the viewport. The position of the element can be controlled using properties such as top, right, bottom, and left.

Unlike an element with position: relative, a fixed element does not move along with the document when the user scrolls. For example, a header with top: 0 remains attached to the top of the viewport.

Syntax

The following syntax is used to apply fixed positioning to an element:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

In this syntax:

selector specifies the HTML element to which the fixed positioning is applied.
position: fixed positions the element relative to the viewport.
top specifies the distance between the element and the top edge of the viewport.
right specifies the distance between the element and the right edge of the viewport.
bottom specifies the distance between the element and the bottom edge of the viewport.
left specifies the distance between the element and the left edge of the viewport.
value can be specified using units such as px, %, em, rem, or other supported CSS length units.

Creating a Fixed Header

A fixed header can be created by applying position: fixed along with top: 0 and left: 0. The width can be set to 100% so that the header covers the available width of the viewport.

Example

In the example below, we create a fixed header that remains at the top of the viewport while the user scrolls the page.

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Fixed Header Example</title>  
    <style>  
        .header {  
            position: fixed;  
            top: 0;  
            left: 0;  
            width: 100%;  
            background-color: #333;  
            color: #fff;  
            padding: 10px;  
        }  
  
        .content {  
            margin-top: 60px;  
            padding: 20px;  
            height: 40vh;  
        }  
    </style>  
</head>  
  
<body>  
    <div class="header">  
        <h1>Fixed Header</h1>  
    </div>  
  
    <div class="content">  
        <h2>Main Content</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non dui vel elit elementum cursus vitae eu ex.</p>  
    </div>  
  
    <div class="content">  
        <h2>Secondary Content</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non dui vel elit elementum cursus vitae eu ex.</p>  
    </div>  
  
    <div class="content">  
        <h2>Another Content</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non dui vel elit elementum cursus vitae eu ex.</p>  
    </div>  
</body>  
  
</html>

Positioning a Fixed Element

The top, right, bottom, and left properties determine where a fixed element appears within the viewport. One or more of these properties can be used depending on the required position.

For example, top: 0 places the element against the top edge, while right: 0 places it against the right edge of the viewport.

Fixed Elements and Normal Document Flow

A fixed element is removed from the normal document flow. Therefore, other elements behave as if the fixed element is not occupying its original space.

For example, if a fixed header is placed at the top of a page, the content below it may appear underneath the header. Padding or margin can be added to the content to create enough space for the fixed element.

Next TopicDisplay Grid in CSS

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.