When an element's position is set to fixed, it is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are then used to place the element. A fixed element does not leave a gap in the page where it would normally have been located.
Example 1: Fixed Navigation Bar
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body to enable scrolling */
body {
height: 2000px;
margin: 0;
}
/* Fixed navigation bar styling */
.fixed-nav {
position: fixed; /* Fix the element relative to the viewport */
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed-nav">
I am a fixed navigation bar!
</div>
</body>
</html>
Explanation: This code creates a navigation bar that remains at the top of the viewport when the user scrolls. The position: fixed; rule anchors the element, and top: 0; and left: 0; place it at the very top-left corner of the screen.
Example 2: Fixed "Back to Top" Button
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body to enable scrolling */
body {
height: 2000px;
}
/* "Back to Top" button styling */
.back-to-top {
position: fixed; /* Keeps the button in place during scroll */
bottom: 20px;
right: 20px;
background-color: #007BFF;
color: white;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="back-to-top">Top</a>
</body>
</html>
Explanation: This example demonstrates a "Back to Top" link that is fixed to the bottom-right corner of the screen. The position: fixed; ensures it's always visible, and bottom: 20px; and right: 20px; provide spacing from the viewport edges.
Example 3: Fixed Social Media Icons Bar
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body to enable scrolling */
body {
height: 2000px;
}
/* Fixed social media bar styling */
.social-bar {
position: fixed; /* Fix the element to the viewport */
top: 30%;
left: 0;
background-color: #f0f0f0;
padding: 10px;
border-radius: 0 5px 5px 0;
}
</style>
</head>
<body>
<div class="social-bar">
Social
</div>
</body>
</html>
Explanation: Here, a social media bar is fixed to the left side of the viewport. The position: fixed; rule keeps it stationary on scroll, while top: 30%; positions it vertically down from the top edge of the browser window.
Example 4: Fixed Header
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body to enable scrolling and provide top margin */
body {
height: 2000px;
margin-top: 80px; /* Prevents content from being hidden by the fixed header */
}
/* Fixed header styling */
.fixed-header {
position: fixed; /* Fix the header to the top */
top: 0;
width: 100%;
height: 60px;
background-color: #28a745;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<header class="fixed-header">
This is a Fixed Header
</header>
<div class="content">
<p>Scroll down to see the effect.</p>
</div>
</body>
</html>
Explanation: This code creates a fixed header at the top of the page. A margin-top is added to the <body> to prevent the initial content from being obscured by the fixed-header which is taken out of the normal document flow.
Example 5: Fixed Footer
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body to enable scrolling and provide bottom margin */
body {
height: 2000px;
margin-bottom: 60px; /* Prevents content from being hidden by the fixed footer */
}
/* Fixed footer styling */
.fixed-footer {
position: fixed; /* Fix the footer to the bottom */
bottom: 0;
width: 100%;
height: 40px;
background-color: #6c757d;
color: white;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<footer class="fixed-footer">
© 2025 Fixed Footer
</footer>
</body>
</html>
Explanation: This example places a footer that is always visible at the bottom of the viewport. position: fixed; and bottom: 0; lock it to the bottom edge of the browser window, and a margin-bottom on the body prevents content overlap.
Example 6: Fixed Alert or Cookie Banner
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body to enable scrolling */
body {
height: 2000px;
}
/* Fixed cookie banner styling */
.cookie-banner {
position: fixed; /* Fix the banner to the viewport */
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="cookie-banner">
This website uses cookies to ensure you get the best experience.
</div>
</body>
</html>
Explanation: This creates a common cookie notification banner fixed to the bottom of the screen. The position: fixed; property ensures that the banner remains in view until it is dismissed by the user, regardless of page scrolling.
Example 7: Fixed Full-Screen Overlay
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the body */
body {
margin: 0;
font-family: sans-serif;
}
/* Fixed overlay styling */
.overlay {
position: fixed; /* Fix the overlay relative to the viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 1000; /* Ensures it's on top of other content */
color: white;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="overlay">
<h1>Fixed Overlay Content</h1>
</div>
<p>Other page content is behind the overlay.</p>
</body>
</html>
Explanation: This code creates a full-screen overlay, often used for modal dialogs or loading screens. By setting position: fixed; and top, left, width, and height to cover the viewport, it effectively blocks interaction with the content underneath.