Explain CSS positioning values and stacking contexts.
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
static is normal flow; relative offsets without removing from flow (and anchors absolutes); absolute positions against nearest positioned ancestor, out of flow; fixed against viewport; sticky scrolls then sticks. Stacking contexts decide z-index battles — created by positioned+z-index, opacity<1, transforms, filters.
Detailed explanation
Position controls removal from normal flow. relative stays in place but offsets visually and — crucially — becomes the containing block for absolute descendants. absolute removes from flow entirely, sizing to content, anchoring to the nearest ancestor with position other than static. fixed pins to viewport (ignoring scroll) unless an ancestor's transform/filter/perspective captures it into a containing block — a classic bug source. sticky combines: behaves relative until crossing a threshold, then acts fixed within its scrolling parent (needs a top value). Z-index only matters within stacking contexts — atomic groups formed by root, positioned elements with z-index, opacity < 1, transform, isolation, will-change and more. A child's z-index can never escape its context: why your modal (z-index 9999) sits under a sidebar whose parent has opacity 0.99. Debug strategy: find the unexpected context creator via devtools' 3D view, add isolation: isolate where needed.
Example
.badge {
position: absolute; /* anchored to .card below */
top: -8px; right: -8px;
z-index: 2;
}
.card { position: relative; }
.header { position: sticky; top: 0; } /* sticks while scrolling */
.faded { opacity: 0.99; } /* creates stacking context! */Interview tip
Give each value one crisp sentence, then spend your depth budget on stacking contexts with the opacity-traps-modal story — that's the senior signal.
Common mistakes
- Forgetting absolute needs a positioned ancestor.
- Not knowing transforms/opacity create stacking contexts.