Fixed

Definition

Removes the element from the normal document flow and positions it relative to the viewport (the browser window). It stays in the exact same place even when the page is scrolled.

Explain Like I'm New

Imagine putting a sticker directly onto your computer monitor. Even if you scroll the website up and down, the sticker never moves because it is stuck to the glass of the screen, not the webpage.

Real World Example

A persistent navigation bar at the top of a website that follows you as you scroll down. A 'Chat with Support' bubble permanently stuck in the bottom-right corner.

Common Use Cases

•Sticky headers/footers
•Floating Action Buttons (FABs)

Interactive Example

Interview Questions

basic

Does a `fixed` element care about parent containers?

intermediate

Why does content sometimes hide underneath a fixed header?

Flash Cards

Question

Does it care about parents?

Click to reveal answer

Answer

No. Unlike `absolute`, `fixed` completely ignores parent containers. `bottom: 0` always means the bottom of the user's browser window.

Question

Content hiding?

Click to reveal answer

Answer

Because `fixed` removes the header from the document flow, the browser acts like the header doesn't exist, and pushes all the website text up to the very top of the page. You usually have to add `padding-top` to the `<body>` to push the text back down below the fixed header.