What does position: fixed do? What does a fixed element attach to?

CSSJunior~1 min read

position: fixed removes the element from the flow (like absolute), but fixes its position relative to the browser window (viewport). Such an element stays in place even when the page is scrolled.

Characteristic features:

does not take up space in the flow: neighboring elements "do not see" it;
the coordinates top, right, bottom, left set the position from the edge of the window, not from an ancestor;
the element stays on screen while scrolling;
often used for headers, buttons, panels, and notifications.

Example:

css

div {
  position: fixed;
  top: 0;
  right: 0;
}

Summary: fixed anchors the element to the viewport, not to its parent, and keeps it on screen regardless of scrolling.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.