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
Fixed Positioning with CSS
The CSS position: fixed property positions an element relative to the browser window (viewport). Unlike other positioning methods, fixed elements remain in the same position even when the page is scrolled, making them ideal for navigation bars, headers, or footers that should always be visible.
Syntax
selector {
position: fixed;
top: value; /* optional */
right: value; /* optional */
bottom: value; /* optional */
left: value; /* optional */
}
Key Characteristics
- Element is removed from the normal document flow
- Positioned relative to the viewport, not the parent element
- Remains in place during scrolling
- Other elements behave as if the fixed element doesn't exist
Example 1: Fixed Header
The following example creates a fixed header that stays at the top of the page ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding-top: 80px; /* Space for fixed header */
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
z-index: 1000;
}
.content {
padding: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="header">
<h1>Fixed Header</h1>
</div>
<div class="content">
<p>This content will scroll behind the fixed header. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Scroll down to see more content. The header will remain at the top of the viewport.</p>
<p>Add more paragraphs to create scrollable content...</p>
</div>
</body>
</html>
A dark header with white text "Fixed Header" appears at the top of the page. The content below scrolls normally while the header remains fixed at the top of the viewport.
Example 2: Fixed Navigation Sidebar
This example demonstrates a fixed sidebar navigation ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding-left: 220px; /* Space for fixed sidebar */
}
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: #f4f4f4;
padding: 20px;
border-right: 1px solid #ccc;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
margin: 10px 0;
padding: 10px;
background-color: #ddd;
border-radius: 5px;
}
.main-content {
padding: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="main-content">
<h1>Main Content Area</h1>
<p>This is the main content that scrolls while the sidebar remains fixed.</p>
</div>
</body>
</html>
A gray sidebar with navigation items appears fixed on the left side of the page. The main content area displays on the right and can scroll independently while the sidebar stays in place.
Example 3: Fixed Footer
This example shows a fixed footer that stays at the bottom of the viewport ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding-bottom: 60px; /* Space for fixed footer */
}
.content {
padding: 20px;
min-height: 100vh;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<div class="content">
<h1>Page Content</h1>
<p>This content can scroll while the footer remains fixed at the bottom.</p>
<p>Add more content to see the scrolling effect...</p>
</div>
<div class="footer">
<p>© 2024 Fixed Footer Example</p>
</div>
</body>
</html>
A dark footer with white copyright text appears fixed at the bottom of the viewport. The main content scrolls normally while the footer remains anchored to the bottom of the screen.
Common Use Cases
| Element | Position | Use Case |
|---|---|---|
| Navigation Bar | top: 0 | Always accessible menu |
| Sidebar | left: 0 or right: 0 | Persistent navigation or tools |
| Footer | bottom: 0 | Copyright, contact info |
| Chat Widget | bottom: 20px, right: 20px | Customer support |
Important Considerations
- Fixed elements are removed from document flow − add padding/margin to body to prevent content overlap
- Use
z-indexto control stacking order when elements overlap - Be mindful of mobile devices where fixed elements can take up significant screen space
- Consider accessibility − ensure fixed elements don't block important content
Conclusion
CSS position: fixed is perfect for creating persistent UI elements that remain visible during scrolling. Use it strategically for navigation, headers, or footers to enhance user experience while being mindful of content overlap and mobile usability.
Updated on: 2026-03-15T11:25:04+05:30
404 Views
Advertisements