position: fixed — Pinned to the Viewport
Fixed elements ignore scrolling. They are how floating chat bubbles, toolbars, and 'back to top' buttons stay in place no matter where you are on the page.
Step 1 of 3
Fixed = pinned to the screen
position: fixed is like absolute, but the positioning context is always the viewport — the visible part of the browser window. top, right, bottom, left are measured from the edges of the screen, not the page.
The element does not move when the user scrolls. It is fixed in place from their perspective.
Think of it this way: Imagine a sticker glued to the inside of your car windscreen. The road moves underneath, but the sticker stays right where it is in your view.
Web Standard
Fixed elements should not block important content. A fixed footer banner that hides text underneath it fails accessibility heuristics. Either give the page enough padding-bottom to account for the fixed element, or let users dismiss it.
Learn more on MDN