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
Selected Reading
CSS position: fixed;
The CSS position: fixed; property positions an element relative to the viewport, which means it stays in the same place even when the page is scrolled. Fixed elements are removed from the normal document flow and positioned using the top, right, bottom, and left properties.
Syntax
selector {
position: fixed;
top: value;
right: value;
bottom: value;
left: value;
}
Possible Values
| Property | Value | Description |
|---|---|---|
position |
fixed |
Sets the positioning method to fixed |
top |
length | % | Distance from the top of the viewport |
right |
length | % | Distance from the right of the viewport |
bottom |
length | % | Distance from the bottom of the viewport |
left |
length | % | Distance from the left of the viewport |
Example: Fixed Position Element
The following example creates a fixed position div at the bottom−right corner of the viewport −
<!DOCTYPE html>
<html>
<head>
<style>
.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
width: 200px;
padding: 15px;
background-color: #4CAF50;
color: white;
border: 3px solid #333;
border-radius: 5px;
text-align: center;
}
.content {
height: 2000px;
padding: 20px;
background: linear-gradient(to bottom, #f0f0f0, #ddd);
}
</style>
</head>
<body>
<div class="content">
<h2>CSS position: fixed;</h2>
<p>Scroll down to see the fixed element behavior. The green box will stay in the same position relative to the viewport.</p>
<p>This content is very tall to demonstrate scrolling...</p>
</div>
<div class="fixed-box">
Fixed Position Box
</div>
</body>
</html>
A green fixed position box appears in the bottom-right corner of the viewport. When you scroll the page, the box remains in the same position relative to the browser window, while the content scrolls behind it.
Conclusion
The position: fixed; property is ideal for creating elements that need to remain visible at all times, such as navigation bars, floating buttons, or notification panels. Remember that fixed elements are removed from the document flow and positioned relative to the viewport.
Updated on: 2026-03-15T12:17:52+05:30
496 Views
Advertisements