Detailed explanation
The main difference between absolute and fixed positioning is which containing block provides their positioning reference. A containing block is the rectangle used to resolve offsets such as top, right, bottom, and left, along with many percentage-based dimensions. Both positioning modes remove the element from normal document flow, so neighbouring elements do not reserve space for it. However, absolute positioning usually anchors an element to a local container, while fixed positioning usually anchors it to the viewport.
For position: absolute, the containing block is normally established by the nearest ancestor whose position is not static: relative, absolute, fixed, or sticky. For a typical block ancestor, its padding box supplies this reference. If no ancestor establishes an absolute-positioning containing block, the element uses the initial containing block, which in continuous screen media has the viewport's dimensions but is anchored at the document origin. Consequently, the element normally moves as the page scrolls rather than remaining pinned to the screen. Ancestors can also establish this containing block through properties such as transform or containment, even without a non-static position.
For position: fixed, the containing block is normally the layout viewport, so the element stays at the same viewport coordinates during page scrolling. Importantly, position: relative on an ancestor alone does not change this reference. However, an ancestor with transform other than none can establish the fixed-positioning containing block; certain other properties, including containment settings, can do so too. The fixed element is then anchored to that ancestor's containing block rather than the viewport and can move with the ancestor during page scrolling.
In the example, .dropdown establishes a local reference through position: relative. Its absolutely positioned .dropdown-menu uses top: 100% and left: 0 to align below the container. The fixed .modal-overlay uses inset: 0 to cover the viewport, provided no ancestor establishes a fixed-positioning containing block. Interviewers look for this default behaviour plus the ancestor-based exceptions, especially because a transformed application wrapper can unexpectedly constrain a supposedly full-screen overlay.
Key points to remember
- Absolute positioning normally uses the nearest non-static positioned ancestor as its containing block.
- Without a qualifying ancestor, an absolute element uses the initial containing block.
- Fixed positioning normally uses the layout viewport and remains stationary during page scrolling.
- Transforms and certain containment properties can establish containing blocks for both absolute and fixed descendants.
- A relative ancestor anchors absolute descendants but does not, by itself, anchor fixed descendants.
Common mistakes candidates make
- Saying absolute positioning always uses the immediate parent instead of the nearest ancestor that establishes a containing block.
- Claiming fixed positioning always uses the viewport and ignoring transformed ancestors.
- Confusing the initial containing block with a viewport-fixed reference and expecting an absolute element to remain stationary during page scrolling.
Likely follow-up questions
Why add position: relative to a dropdown container?
It establishes a containing block for the absolutely positioned menu without removing the container from normal flow. With no offsets applied, the container stays in its normal position.
Why might a fixed modal overlay fail to cover the viewport?
An ancestor with transform other than none may establish its containing block, so inset: 0 covers that ancestor's reference box instead. Moving the overlay outside that ancestor, often through a portal, can restore viewport-relative positioning.
Does a higher z-index change the containing block?
No; z-index affects stacking, not the reference rectangle used for positioning. Increasing it cannot make an ancestor-relative fixed element become viewport-relative.
Interview tip: State the default containing block for each mode, explain the transformed-ancestor exception, and illustrate the difference with the dropdown and overlay examples.