Detailed explanation
The CSS position property controls how an element participates in layout and how its position is calculated. Its five main values are static, relative, absolute, fixed, and sticky. To explain them accurately, connect each value to normal document flow, its containing block, and inset properties such as top, right, bottom, and left. Interviewers often check whether you understand which elements reserve layout space and what their offsets are measured against.
static is the default: the element follows normal layout rules, and inset properties do not reposition it. relative keeps the element’s original space in the layout but visually offsets it from its normal position. For example, top: 10px moves a relatively positioned element downward without shifting its siblings. A relatively positioned element also establishes a containing block for absolutely positioned descendants, making position: relative useful even when no offsets are specified.
absolute removes an element from normal flow, so siblings behave as though it occupies no space. Its insets usually reference the padding box of the nearest ancestor whose position is not static; without one, they reference the initial containing block. Properties such as transform can also establish a containing block. In .tooltip { position: absolute; top: 100%; left: 0; }, a suitable positioned wrapper makes the tooltip sit below that wrapper and align with its left edge. fixed also removes an element from flow and normally uses the viewport as its containing block, keeping it stationary while the document scrolls. However, an ancestor with a non-none transform can make a fixed descendant use that ancestor instead.
sticky retains its layout space but adjusts its visual position when scrolling reaches a specified inset threshold. With .navbar { position: sticky; top: 0; }, the navbar stays at the top of its nearest scrollport once necessary, while remaining constrained by its containing block. Unlike a truly fixed element, it cannot remain pinned beyond that boundary. Sticky positioning needs a non-auto inset on the relevant axis and enough scrolling room. Ancestor overflow settings can change which scroll container it follows, so inspect them when sticky appears ineffective.
Key points to remember
- static follows normal layout, and inset properties have no positioning effect.
- relative preserves layout space while applying visual offsets.
- absolute leaves normal flow and uses an established containing block for its offsets.
- fixed leaves normal flow and usually stays positioned against the viewport.
- sticky preserves layout space and applies scroll-dependent offsets within container constraints.
Common mistakes candidates make
- Assuming absolute positioning always references the direct parent instead of the nearest ancestor that establishes its containing block.
- Claiming fixed always references the viewport, overlooking containing blocks created by properties such as transform.
- Using sticky without a relevant inset or ignoring ancestor overflow and insufficient scrolling space.
Likely follow-up questions
How do relative and absolute positioning work together?
Set position: relative on a wrapper to establish the containing block without moving the wrapper. An absolutely positioned child can then use offsets such as top: 0 and right: 0 to align with that wrapper.
Why might position: sticky not work?
Check that an inset such as top: 0 is set and that the element has room to move within its containing block. Also inspect ancestor overflow settings, which may make it follow a different scroll container than expected.
Does a larger z-index always place a positioned element on top?
No: z-index is interpreted within stacking contexts, not as one global ranking. A child with a very large z-index cannot escape its ancestor’s stacking context to cover an element in a higher sibling stacking context.
Interview tip: Explain each value using the same sequence—flow participation, positioning reference, and scrolling behaviour—then demonstrate absolute and sticky with small examples.