Fixed Positioning
position: fixed positions an element relative to the viewport. It stays in place as the page scrolls. Used for sticky headers, floating buttons, and modals.
CSS
Beginner
4 min read
position: fixed
Example
/* Sticky navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 100;
}
/* Offset page content so navbar does not cover it */
body { padding-top: 60px; }
/* Back to top button */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
} Pro Tip
Fixed elements are removed from flow — add padding to the body to prevent content hiding behind a fixed header.