Fixed & Sticky Positioning
What are Fixed & Sticky Positions?
position: fixed: Imagine pasting a post-it note directly onto your computer screen. No matter how much you scroll the document window behind it, the post-it note stays in the exact same spot, floating on top of the text.position: sticky: Imagine a scrollable grocery list. As you scroll down, the "Header Section" scrolls normally until it hits the top edge of the screen, where it "sticks" in place so you can always see the category, while the items scroll underneath it.In CSS:
fixed: Positions elements relative to the browser viewport. They do not move during page scrolling.sticky: Acts like relative positioning until the viewport scrolls to a specific threshold (e.g. top: 0;), where it locks in place like a fixed element.Why does it matter?
Fixed positioning is used for permanent overlays like "Back to Top" buttons, floating live chat widgets, and persistent navigation headers. Sticky positioning is perfect for sidebar menus and table headers that should stay visible as users read long documents.Syntax Breakdown
position: fixed; top: 0; — Locks element to top of browser window.position: sticky; top: 0; — Sticks element to top when scroll reaches it.Common Mistakes
position: sticky; without specifying a scroll threshold (like top: 0; or bottom: 10px;) will prevent the element from sticking. The browser needs to know *where* to lock the element!overflow: hidden; set. This is a very common source of styling bugs!Quick Reference
position: fixed — Positions relative to the viewport window.position: sticky — Position locks dynamically during page scrolling.top: 0 — Standard sticky/fixed locking threshold.Your Task
Set the `position` of the `header` to `sticky` and set `top` to `0` so it locks to the top when scrolling.
index.html
Type code above to start the lesson.
Live Preview