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

31 Oct, 2021
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:
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. 
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.
This property is supported by all the browsers.
This property is only supported by all modern browsers.
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
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript