MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Have you ever scrolled down a long shopping website or blog, and noticed that the top navigation menu stays glued to the top of your screen, or a small green WhatsApp chat button floats in the bottom-right corner no matter how far down you scroll? 📌
That magical scrolling behavior is powered by position: fixed and position: sticky!
In this lesson, you will master:
position: fixed; — Elements that lock permanently to your screenposition: sticky; — The hybrid chameleon that sticks only when neededImagine taking an exam in your School Exam Hall:
+-------------------------------------------------------------------------+ | FIXED VS STICKY POSITIONING EXPLAINED | +-------------------------------------------------------------------------+ | 1. position: fixed (THE EXAM HALL WALL CLOCK) | | There is a digital clock mounted high on the classroom wall. | | No matter which page of your 12-page exam paper you turn, the wall | | clock remains in the EXACT same spot in your field of vision! | | | | 2. position: sticky (THE POST-IT CHAPTER BOOKMARK) | | You place a sticky tab bookmark on the first page of Chapter 4. | | As you read through Chapter 4, the tab stays pinned to the top edge | | of your desk. But when you finish Chapter 4 and move to Chapter 5, | | the Chapter 4 tab scrolls away with its chapter! | +-------------------------------------------------------------------------+
position: fixed; (The Screen-Pinned Element)When you set an element to position: fixed;:
+-------------------------------------------------------------+ | BROWSER VIEWPORT (SCREEN) | | | | Page content scrolls up and down... | | | | +-----------------+ | | | (WhatsApp Icon) | | | | position: fixed;| | | +-----------------+ | +-------------------------------------------------------------+
Because position: fixed; takes the element out of document flow, the header occupies zero height in the page layout!
This causes the top of your webpage content (like your main title) to slide directly underneath the header and disappear!
Always add top padding to the <body> (or main container) equal to the height of your fixed header:
position: sticky; (The Hybrid Chameleon)position: sticky; is a newer, intelligent positioning scheme. It acts like a hybrid between relative and fixed:
relative): As long as the element is visible on screen, it behaves like normal relative content and scrolls naturally.fixed): Once the user scrolls past the element's defined threshold (e.g. top: 0;), the element locks in place at that edge!position: fixed, a sticky element never leaves its parent container. When the user scrolls completely past the parent container, the sticky element scrolls away with it!If you write position: sticky; and it doesn't work, 99% of the time it is caused by one of these 3 traps:
You must specify at least one threshold coordinate (top, bottom, left, or right). Without top: 0;, the browser doesn't know where it is supposed to stick!
overflow: hidden TrapIf ANY ancestor/parent element has overflow: hidden, overflow: auto, or overflow: scroll, sticky positioning breaks completely! Ensure all ancestor elements keep default overflow: visible;.
A sticky element cannot stick outside its parent container. If the parent container is the exact same height as the sticky element, there is no scroll room inside the parent to stick!
| Feature | position: fixed | position: sticky |
|---|---|---|
| Reference Anchor | Entire browser viewport | Nearest scrolling container / parent element |
| Document Flow | Ripped out (Takes 0px space) | Preserved (Takes normal layout space) |
| Stops Sticking? | ❌ Never (Always pinned) | ✅ Yes (When parent scrolls out of view) |
| Best Used For | Floating action buttons, global modals, persistent alerts | Section sub-headers, sticky table column titles, sidebars |
| Bad Practice ❌ | Why It Fails ⚠️ | Better Approach ✅ |
|---|---|---|
Writing position: fixed on a header without setting padding-top on <body> | The top paragraph and headings slide behind the fixed header and disappear. | Add padding-top: [header-height] to <body>. |
Writing position: sticky without specifying top: 0 | The browser has no trigger coordinate to lock the element. | Always declare a threshold like top: 0; or top: 16px;. |
Adding overflow: hidden to a section containing a sticky sidebar | The parent container captures the scroll context, breaking sticky behavior. | Keep ancestors set to default overflow: visible;. |
Forgetting z-index on fixed/sticky headers | Elements with shadows or transforms below it can visually bleed on top of your header. | Add z-index: 100; to keep your header on top. |
position: fixed; locks elements permanently to the browser viewport; takes 0 layout space.padding-top to <body> matching the fixed header's height.position: sticky; behaves like relative until a threshold is reached, then locks like fixed within its parent container.top: 0;) and avoid overflow: hidden; on parent elements.position: fixed; height: 60px;, the top heading of your webpage is partially cut off. How do you solve this?position: sticky; differ fundamentally from position: fixed;?position: sticky; element to completely fail to stick?<th>) with position: sticky; top: 0;?sticky-and-fixed-lab.html.In the next lesson, we will continue your web styling journey with z-index Basics: Controlling 3D Layering and Stacking Order (Introduction to Positioning).
👉 Continue to Next Lesson: z-index Basics: Controlling 3D Layering and Stacking Order →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.