CSS Positioning: static/relative/absolute/fixed/sticky

30‑second interview answer

position controls how an element is laid out. static is default. relative keeps its place but can be offset and becomes an anchor for absolutely positioned children. absolute is removed from normal flow and positioned relative to the nearest positioned ancestor. fixed is relative to the viewport. sticky behaves like relative until a scroll threshold, then sticks.

The types (quick but clear)

static

• normal flow
• top/left don’t apply

relative

• stays in flow
• top/left offsets visually
• creates positioning context for children

absolute

• removed from flow
• positioned relative to nearest ancestor that is not static

fixed

• removed from flow
• attached to viewport

sticky

• hybrid: relative + fixed
• requires scroll container context

The #1 absolute positioning rule

If you want a child to be absolute within a card:

.card { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }

Stacking context / z-index (common confusion)

• z-index works only on positioned elements (and some layout contexts).
• Creating new stacking contexts can make elements appear behind unexpectedly.

Interview-safe approach:

“I debug with DevTools layers and simplify stacking contexts.”

Mini Q&A

Q1: Absolute is relative to what?

• Nearest positioned ancestor.

Q2: Difference between fixed and sticky?

• fixed always sticks; sticky sticks after threshold.

Q3: Why set parent relative?

• So absolute children position within it.

Summary checklist

• I can explain each position type.
• I know absolute anchoring rule.
• I can use sticky correctly.
• I understand basic stacking context.