What is the difference between CSS position:sticky and position:fixed?
What’s the difference between CSS position:sticky and position:fixed?
In CSS, the position property is used to set the position of an HTML element within the viewport. It can have values such as fixed, sticky, static, absolute, and relative.
In this tutorial, we’ll learn the difference between position:fixed and position:sticky.
What is position:fixed in CSS?
The position attribute with the value fixed sets any element to a fixed position within the HTML viewport. When we set a fixed position on any HTML element, it appears out of the document flow. It sets the position based on the viewport, even if we add the HTML element to a div element at the bottom of the webpage.
Additionally, when using position:fixed, developers can use the top, left, bottom, and right CSS properties to set the position of an HTML element relative to the viewport.
Syntax
Users can use the position:fixed CSS property with the following syntax.
Position:fixed;
Example 1
In the example below, we have a scrollable div element that contains text about CSS. We also add a Facebook icon. For the image, we set a fixed position and use 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 `position:fixed` in CSS to set a fixed position for HTML elements</h3>
<div class="text">
CSS is a language used for style sheets, which defines how a document (usually HTML) is presented. CSS, along with HTML and JavaScript, is a key technology for the internet.
<img src="https://png.pngtree.com/png-vector/20221018/ourmid/https://coder-cafe.com/wp-content/uploads/2025/09/pngtree-facebook-social-media-icon-png-image_6315968.png" alt="Facebook icon">
</div>
</body>
</html>
What is position:sticky in CSS?
position:sticky is almost similar to position:fixed, but there’s a slight difference. Regardless, whenever we apply the sticky position to an HTML element, it sets a fixed position based on the parent element, rather than the viewport.
Thus, when we scroll the parent element, an HTML element with a sticky position becomes fixed when it reaches an offset.
Syntax
Users can use position:sticky in CSS according to the following syntax.
position:sticky;
Example 2
In the example below, we added some text to a div element. We then added the Facebook icon, and then the text again. Our div element is scrollable, and we set a sticky position for the image element.
In the output, users can observe that when they scroll the div element and the image reaches a distance of 30px, it becomes fixed.
<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>Use `position:sticky` in CSS to set a fixed position for HTML elements</h2>
<div class="text">
This text is positioned above the image. This text is positioned above the image. This text is placed above the image. <br>
<img src="https://png.pngtree.com/png-vector/20221018/ourmid/https://coder-cafe.com/wp-content/uploads/2025/09/pngtree-facebook-social-media-icon-png-image_6315968.png" alt="Facebook icon">
This text is placed below the image. This text is placed below the image. This text is placed below the image.
</div>
</body>
</html>
What is the difference between position:fixed and position:sticky?
The following table lists the differences between position:fixed and position:sticky.
| Attributes | position:fixed | position:sticky |
|---|---|---|
| Element Position | It sets the element’s position relative to the HTML viewport. | It sets the element’s position relative to the parent element. |
| Scroll Position | It remains fixed regardless of whether we scroll the document. | It becomes fixed only when the element is scrolled to an offset from the parent element. |
| Overlap Other Elements | It always overlaps other elements. | When an element reaches its offset and becomes fixed, it covers other elements. |
| Browser Support | Supported by all browsers. | Supported by modern browsers only. |
| Purpose | One use case for fixed positioning is to add social media icons in a sidebar. | It can be used to display sticky ads. |
Example 3
In the following example, when the user clicks the “Set Sticky” button, it sets a sticky position for the image; when the user clicks the “Set Fixed” button, it sets a fixed position for the image element.
In the output, the user can observe the difference between fixed and sticky positioning by clicking the button to change the position.
<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 `position:sticky` and `position:fixed` in CSS</h2>
<div class="parent">
Nature is everything in the physical world, 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/https://coder-cafe.com/wp-content/uploads/2025/09/images?q=tbn:ANd9GcR5E6WD3gFcs5kuTU6SX7VHO3YfghVscOwxOxdzEmrvfg&s"
alt="Nature">
While its power and diversity are immense, nature is also fragile and requires careful management 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 learn the difference between ‘position: fixed’ and ‘position: sticky’. The main difference is that the ‘fixed’ property sets the position of an HTML element relative to the viewport, while the ‘sticky’ property sets the position relative to the parent element.