Fixed Position

Fixed Position

position: fixed positions an element relative to the viewport (browser window). It stays in place even when the page is scrolled — perfect for fixed headers, floating buttons, and persistent UI.

Basic Syntax

.element {
    position: fixed;
    top: 0;
    left: 0;
}

How Fixed Positioning Works

1. Element is removed from the document flow
2. Positioned relative to the viewport, not any ancestor
3. Stays in the same screen position when scrolling
4. Doesn't take up any space in the layout

Fixed Header

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;       /* Stretch full width */
    height: 60px;
    background: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 30px;
    z-index: 100;   /* Stay above other content */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* IMPORTANT: Add top padding to the body
   so content isn't hidden behind the fixed header */
body {
    padding-top: 60px;
}

Back-to-Top Button

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 50;
}

.back-to-top:hover {
    background: #2980b9;
    transform: translateY(-3px);
}

Fixed Sidebar Navigation

.sidebar-nav {
    position: fixed;
    top: 60px;       /* Below the fixed header */
    left: 0;
    bottom: 0;
    width: 250px;
    background: #34495e;
    padding: 20px 0;
    overflow-y: auto;  /* Scroll within sidebar if content overflows */
    z-index: 90;
}

.main-content {
    margin-left: 250px;   /* Push content next to sidebar */
    padding-top: 60px;     /* Below fixed header */
}

Fixed Cookie Banner

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c3e50;
    color: white;
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 200;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}

fixed vs absolute

Feature	absolute	fixed
Positioned relative to	Nearest positioned ancestor	The viewport
Scrolls with page	Yes (moves with parent)	No (stays in place)
Removed from flow	✅ Yes	✅ Yes
Common use	Badges, overlays, tooltips	Headers, floating buttons

Position Sticky — The Hybrid

position: sticky starts as relative and becomes fixed when scrolled to a threshold:

.section-header {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    z-index: 10;
}

/* The header scrolls normally until it reaches the top of
   the viewport, then "sticks" in place like a fixed element.
   When the parent scrolls out of view, it scrolls away too. */

sticky vs fixed

Feature	sticky	fixed
Stays in flow	✅ Yes (takes up space)	❌ No
Scrolls initially	✅ Yes, until threshold	❌ Always fixed
Respects parent bounds	✅ Yes — sticks within parent	❌ Always visible
Needs top/bottom	✅ Required to activate	✅ For positioning

Key Takeaways

• position: fixed locks an element to the viewport — doesn't scroll
• Always offset the body content to prevent content hidden behind fixed elements
• Use z-index to ensure fixed elements stay above normal content
• position: sticky is a hybrid — relative until scroll threshold, then fixed
• Sticky elements stay within their parent's boundaries
• Common fixed patterns: headers, footers, floating action buttons, cookie banners