What is the difference between position: absolute and position: fixed in CSS?

What is the difference between position: absolute and position: fixed in CSS?

• A. Absolute is positioned relative to the nearest positioned ancestor; fixed is relative to the viewport and remains in place during scrolling.
• B. Absolute uses the document flow, fixed does not.
• C. Absolute is relative to the viewport; fixed is relative to the document.
• D. Absolute and fixed both detach from the normal flow in the same way.

Answer: (A)

The key idea here is what reference frame each type of positioning uses and how that affects scrolling. An element with position: absolute is taken out of the normal document flow and is positioned relative to the nearest ancestor that has a position value other than static. If there is such an ancestor, the element’s position is calculated from that ancestor’s padding box. If there isn’t, it’s positioned relative to the page’s root container. In contrast, an element with position: fixed is also taken out of the normal flow, but its containing block is the viewport—the visible part of the page—so it stays in the same place on the screen even as you scroll. That distinction explains why the correct description says absolute is positioned relative to the nearest positioned ancestor, while fixed is relative to the viewport and remains in place during scrolling. The other statements misstate the reference frame or the behavior after scrolling, so they don’t fit how these two positioning modes actually work.

The key idea here is what reference frame each type of positioning uses and how that affects scrolling. An element with position: absolute is taken out of the normal document flow and is positioned relative to the nearest ancestor that has a position value other than static. If there is such an ancestor, the element’s position is calculated from that ancestor’s padding box. If there isn’t, it’s positioned relative to the page’s root container. In contrast, an element with position: fixed is also taken out of the normal flow, but its containing block is the viewport—the visible part of the page—so it stays in the same place on the screen even as you scroll.

That distinction explains why the correct description says absolute is positioned relative to the nearest positioned ancestor, while fixed is relative to the viewport and remains in place during scrolling. The other statements misstate the reference frame or the behavior after scrolling, so they don’t fit how these two positioning modes actually work.