Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between position:sticky and position:fixed in CSS?
In CSS, the ‘position’ property is used to set the position in the viewport for the HTML element. It can have values such as ‘fixed’, ‘sticky’, ‘static’, ‘absolute’, ‘relative’, etc.
In this tutorial, we will learn the difference between the ‘position: fixed’ and ‘position: sticky’.
What is Position: Fixed in CSS?
The ‘fixed’ value for the position property is used to set any element at the fixed position in the HTML viewport. Whenever we set the fixed position for any HTML element, it comes out from the document flow. It sets the position based on the viewport, even if we have added the HTML element inside the div element at the bottom of the web page.
Also, developers can set the position of the HTML element relative to the viewport using the ‘top’, ‘left’, ‘bottom’, and ‘right’ CSS properties while using the ‘position: fixed’.
Syntax
Users can follow the syntax below to use the ‘position: fixed’ CSS property.
Position: fixed;
Example 1
In the example below, we have a scrollable div element containing the text about CSS. We have added the Facebook icon also in the div element. For the image, we have set the ‘fixed’ position and used the ‘top’ and ‘left’ properties to set the top and left positions.
In the output, users can observe the fixed position of the Facebook icon.
<html>
<head>
<style>
.text {
width: 500px;
height: 200px;
overflow: auto;
background-color: aqua;
font-size: 1.25rem;
}
img {
position: fixed;
left: 20px;
top: 130px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h3>Using the <i> position: fixed </i> in CSS to set a fixed position for an HTML element</h3>
<div class = "text">
CSS is a language for style sheets that are utilized to define how a document, typically in HTML, should be presented. CSS, alongside HTML and JavaScript, is a vital technology for the World Wide Web.
<img src = "https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt = "Facebook icon">
</div>
</body>
</html>
What is Position: Sticky in CSS?
The ‘position: sticky’ is almost similar to the ‘position: fixed’, but there is a small difference. Whenever we apply the ‘sticky’ position to the HTML element, it sets the fixed position based on the parent element rather than setting up a position relative to the viewport like a ‘fixed’ position.
So, it becomes fixed when we scroll the parent element, and an HTML element with a ‘sticky’ position reaches the offset.
Syntax
Users can follow the syntax below to use the ‘position: sticky’ in CSS.
position: sticky
Example 2
In the example below, we added some div element text. After that, we have added the Facebook icon, and again we have added the text. Our div element is scrollable, and we have set a ‘sticky’ position for the image element.
In the output, users can observe that it becomes fixed when they scroll the div element and image reaches the 30px from the top of the div element.
<html>
<head>
<style>
.text {
width: 500px;
height: 200px;
overflow: auto;
background-color: pink;
font-size: 1.4rem;
}
img {
position: sticky;
left: 0px;
top: 30px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h2>Using the <i> position: sticky </i> in CSS to set a sticky position for an HTML element</h2>
<div class = "text">
This text is above the image. This text is above the image. This text is above the image <br>
<img src = "https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt = "Facebook icon">
This text is below the image. This text is below the image. This text is below the image.
</div>
</body>
</html>
What is the Difference Between Position: Fixed and Position: Sticky?
Here is the difference table of ‘position: fixed’ and ‘position: sticky’.
| Property | Position: fixed | Position: sticky |
|---|---|---|
| Element position | It sets the element position related to the HTML viewport. | It sets the element’s position related to the parent element. |
| Scroll position | It remains always fixed even, if we scroll the document or not. | It becomes fixed only when the element reaches the offset while scrolling the parent element. |
| Overriding other elements | It always overrides the other elements. | It overrides the other elements when the element reaches the offset and becomes fixed. |
| Browser support | All browsers support it. | Only modern browsers support it. |
| Uses | One of the use cases of the fixed position is to add social media icons in the sidebar. | It can be used to show sticky ads. |
Example 3
In the example below, when the user clicks the ‘set sticky’ button, it sets the sticky position for the image, and when the user clicks the ‘set fixed’ button, it sets the fixed position for the image element.
In the output, users can observe the difference between the fixed and sticky positions by changing the position by clicking the button.
<html>
<head>
<style>
.parent {
width: 400px;
height: 300px;
overflow: auto;
background-color: green;
color: white;
font-size: 2rem;
}
img {
position: fixed;
left: 0px;
top: 50px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h2>Using the <i> position: sitcky and postion: fixed </i> in CSS</h2>
<div class = "parent">
Nature is the physical world and everything in it, including plants, animals, landscapes, and natural phenomena.
It is a source of beauty, inspiration, and wonder, and provides vital resources for our survival.
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5E6WD3gFcs5kuTU6SX7VHO3YfghVscOwxOxdzEmrvfg&s"
alt = "Nature">
Despite its immense power and diversity, nature is also fragile and requires careful stewardship to ensure its continued health and sustainability.
</div><br>
<button onclick = "setSticky()"> set sticky </button> <br> <br>
<button onclick = "setFixed()"> set fixed </button>
<script>
function setSticky() {
document.querySelector("img").style.position = "sticky";
}
function setFixed() {
document.querySelector("img").style.position = "fixed";
}
</script>
</body>
</html>
Users learned the difference between the ‘position: fixed’ and ‘position: sticky’. The main difference is that the ‘fixed’ position sets the position of the HTML elements according to the viewport, and the ‘sticky’ position sets the position according to the parent element.
11K+ Views
