Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between position:sticky and position:fixed in CSS?
In CSS, the position property controls how an element is positioned within the document. Two commonly confused values are fixed and sticky, which behave differently when scrolling.
In this tutorial, we will learn the key differences between position: fixed and position: sticky.
What is Position: Fixed in CSS?
The fixed value positions an element relative to the viewport, removing it from the normal document flow. The element remains in the same position even when the page is scrolled.
Syntax
selector {
position: fixed;
top: value;
left: value;
}
Example 1: Fixed Position Element
In this example, we create a scrollable container with a fixedpositioned icon that stays in place regardless of scrolling
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
height: 200px;
overflow: auto;
background-color: #e0f7fa;
padding: 20px;
font-size: 1.1rem;
line-height: 1.5;
}
.fixed-icon {
position: fixed;
top: 50px;
right: 20px;
width: 60px;
height: 60px;
background-color: #1976d2;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Position: Fixed Example</h3>
<div class="container">
CSS is a stylesheet language used to describe the presentation of HTML documents.
It controls layout, colors, fonts, and spacing. CSS works by selecting HTML elements
and applying style rules to them. The cascade determines which styles take precedence
when multiple rules apply to the same element. CSS enables responsive design,
animations, and modern web layouts through features like Flexbox and Grid.
</div>
<div class="fixed-icon">F</div>
</body>
</html>
A scrollable container with text and a blue circular icon labeled "F" fixed to the top-right of the viewport. The icon remains in position when scrolling the container.
What is Position: Sticky in CSS?
The sticky position behaves like relative until the element reaches a specified threshold during scrolling, then it becomes fixed within its containing block.
Syntax
selector {
position: sticky;
top: value;
}
Example 2: Sticky Position Element
Here, we demonstrate a sticky element that becomes fixed when it reaches the top offset while scrolling
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
height: 200px;
overflow: auto;
background-color: #fce4ec;
padding: 20px;
font-size: 1.1rem;
line-height: 1.5;
}
.sticky-header {
position: sticky;
top: 0;
background-color: #e91e63;
color: white;
padding: 10px;
text-align: center;
font-weight: bold;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Position: Sticky Example</h3>
<div class="container">
<p>Scroll down to see the sticky behavior...</p>
<p>CSS positioning allows developers to control element placement on web pages.</p>
<div class="sticky-header">Sticky Header</div>
<p>The sticky position is a hybrid of relative and fixed positioning.</p>
<p>It acts like relative positioning until a scroll threshold is met.</p>
<p>Then it behaves like fixed positioning within its container.</p>
<p>This makes it perfect for headers that should stick to the top.</p>
</div>
</body>
</html>
A scrollable container with a pink header that becomes sticky at the top of the container when scrolled. The header starts in normal flow but sticks when it reaches the top edge.
Key Differences Between Fixed and Sticky
| Property | Position: Fixed | Position: Sticky |
|---|---|---|
| Reference Point | Viewport (browser window) | Nearest scrolling ancestor |
| Scroll Behavior | Always remains in same viewport position | Becomes fixed only when reaching threshold |
| Document Flow | Completely removed from flow | Remains in flow until threshold reached |
| Browser Support | Excellent (all modern browsers) | Good (modern browsers) |
| Common Use Cases | Floating buttons, modals, notifications | Sticky headers, navigation bars |
Conclusion
The main difference is that position: fixed elements are positioned relative to the viewport and always stay in place, while position: sticky elements are positioned relative to their containing block and only become fixed when scrolling reaches a specified threshold.
13K+ Views
