Open In App

What is the difference between position:sticky and position:fixed in CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will discuss two very similar CSS Properties which are position: sticky and position: fixed.

The Position property in CSS specifies the positioning for an HTML element or entity. The element’s position can be set by specifying the top, right, bottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. To set the position by these four properties, we have to declare the positioning method. There are five positioning properties available in CSS:

  • Fixed: The position of the element will be positioned relative to the viewport.
  • Static: The elements will be positioned according to the normal flow of the page.
  • Relative: The element remains in the normal flow of the document but left, right, top, and bottom affects.
  • Absolute: The position of the element will be relative to the closest positioned ancestor.
  • Sticky: The element with position: sticky and top: 0 played a role between fixed & relative based on the position where it is placed.

We will discuss only the position: fixed and sticky properties. Both of these are used to fix the element to a certain position in the HTML page. Please refer to the CSS Positioning Elements article for more details.

The position: fixed means fixed to the viewport. We provide the position values (top, bottom, right, or left) and the element stays there when the user is scrolling. No matter what is happening on screen the fixed element will not move at all.

 

Syntax:

selector {
     position: fixed;
}

Example: When we use the position: fixed property, the element stays fixed to its position irrespective of what is happening on screen it is fixed at the viewport.

HTML




<html>
<head>
    <style>
    body {
        margin: 0;
        padding: 20px;
        font-family: sans-serif;
        background: #efefef;
    }
      
    .fixed {
        position: fixed;
        background: #088523;
        color: #ffffff;
        padding: 30px;
        top: 250;
        left: 10;
    }
      
    span {
        padding: 5px;
        border: 1px #ffffff dotted;
    }
    </style>
</head>
  
<body>
    <div class="fixed">This div has 
        <span>position: fixed;</span
    </div>
    <h1>
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    </h1
</body>
</html>


Output:

The position: sticky means the element will scroll until it reaches the offset value given to it by the user and then stays in its position. Sticky element always stays within its parent block and as soon as the parent block leaves the screen as an effect of scrolling, sticky elements also leave with it.

Syntax:

selector {
     position: sticky;
}

Example: When we use the position: sticky property, the element scrolls till it touches the top, will be fixed at that place in spite of further scrolling.

HTML




<html>
<head>
    <style>
    body {
        margin: 0;
        padding: 20px;
        font-family: sans-serif;
        background: #efefef;
    }
      
    .sticky {
        position: sticky;
        background: #088523;
        color: #ffffff;
        padding: 30px;
        top: 0;
        left: 10;
    }
      
    span {
        padding: 5px;
        border: 1px #ffffff dotted;
    }
    </style>
</head>
  
<body>
    <h1>
       What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <div class="sticky">This div has 
        <span>position: sticky;</span>
    </div>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    <br/>
    <br/> 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    </h1>
</body>
</html>


Output:

Difference between position: fixed and position: sticky property:

S.No.

Position: fixed

Position: Sticky

1.

Element with position: fixed property is fixed to the viewport and doesn’t move irrespective of scrolling.

Element with position: sticky property can scroll to an offset value provided by the user. 

2.

Element with position: fixed property never leaves the viewport position it was fixed to.

Element with position: sticky property leaves the viewport when its parent element scrolls off the viewport.

3.

This property is supported by all the browsers.

This property is only supported by all modern browsers.

4.  Element with position: fixed property does not effect the other element’s flow on the page ie it does not capture additional space. Element with position: sticky property does effect the other element’s flow in the page ie., it will take the additional space.

Supported browsers:

position: fixed is supported by:

  • Google Chrome 1.0
  • Internet Explorer 7.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0

position: sticky is supported by:

  • Google Chrome 56.0
  • Microsoft Edge 16.0
  • Firefox 32.0
  • Opera 43,0
  • Safari 13.0


Last Updated : 31 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads