CSS Positioning: Static, Relative, Absolute, Fixed, and Sticky

CSS Positioning Models Under the Hood

In frontend layouts, a foundational interview question is:

Explain the differences between the CSS positioning models (static, relative, absolute, fixed, and sticky). How do they impact the normal document flow?

To answer this, you must analyze how each position scheme behaves relative to its container and how it impacts surrounding elements.

1. The Positioning Schemes

A. static (Default)

• Reference Point: The normal document layout flow.
• Document Flow: The element occupies its natural space in the flow. Sizing is determined by normal block/inline box model rules.
• Offset Properties: top, bottom, left, right, and z-index have no effect.

B. relative

• Reference Point: The element's own default static position.
• Document Flow: The original space of the element is preserved in the flow. It acts as if it is still positioned statically, and nearby elements do not move to fill the gap.
• Offset Properties: Offsets (top, left, etc.) shift the element visually from its resting place without altering surrounding elements. It also establishes a coordinate system for any child elements set to absolute.

C. absolute

• Reference Point: The closest ancestor container that has a position value other than static (e.g., relative, absolute, fixed, or sticky). If no such ancestor exists, it positions itself relative to the Initial Containing Block (the viewport boundary).
• Document Flow: The element is completely removed from the normal document flow. Other elements behave as if it does not exist, collapsing to fill its space.
• Offset Properties: Sizing and offset properties (top, left, etc.) determine the box's coordinates relative to its parent container's borders.

D. fixed

• Reference Point: The browser viewport (or a container with a transform, perspective, or filter property other than none acting as the containing block).
• Document Flow: The element is completely removed from the normal document flow.
• Offset Properties: Position coordinates remain locked to the viewport and do not shift during page scrolling.

E. sticky

• Reference Point: It acts as relative until the viewport scroll offset crosses a specified threshold, at which point it acts as fixed within the boundaries of its parent element.
• Document Flow: Space is preserved in the normal document flow.
• Important: It stays active only within its parent box. Once the parent box scrolls out of view, the sticky element scrolls out with it.

2. Quick Stacking Context & Stacking Order

A positioning property other than static combined with a z-index value other than auto creates a new Stacking Context.

Within a stacking context, child elements are stacked based on:

1. Root element of the stacking context.
2. Positioned elements with negative z-index.
3. Non-positioned block elements.
4. Non-positioned float elements.
5. Inline elements.
6. Positioned elements with z-index: auto or 0.
7. Positioned elements with positive z-index (higher number on top).

3. Comparison Matrix

Key Takeaways

• Relative Container: Use relative on parent elements when you want to contain absolute children inside their boundaries.
• Sticky Elements: Use sticky for layout headers, tables of contents, or sidebar widgets that should follow scrolling but remain inside their sections.
• Layout Collapse: Remember that fixed and absolute collapse parent dimensions, which often requires explicitly setting dimensions on parent wrappers.