Stacking Contexts — CSS Technical Interview Questions & Answers

How z-index actually resolves overlap conflicts.

Stacking Contexts

  • Stacking Contexts (css adv index) is a CSS topic. In plain words you use it for a sticky header in a long article. Don’t start with a slogan — start with that picture.
  • Smallest example: position: sticky; top: 0. Type it, run it, and say what you see. If you can do that from memory, you know Stacking Contexts (css adv index).
  • From the example next to this theory: How z-index actually resolves overlap conflicts.
  • Trap: z-index war without a stacking context. Fix that before you talk about advanced CSS.
  • Viva: what is Stacking Contexts (css adv index)? Then show position: sticky; top: 0. Then name the trap.

Technical Interview Tip: What is Stacking Contexts (css adv index)? Show this: position: sticky; top: 0. Trap: z-index war without a stacking context.

Code Examples for Stacking Contexts

Stacking Contexts — working example

.card {
  position: relative; /* containing block for absolute children */
}

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

Stacking Contexts — absolute uses the nearest positioned ancestor; fixed uses the viewport; sticky toggles within flow.

How to Explain Stacking Contexts to an Interviewer

What is Stacking Contexts (css adv index)?

Used for a sticky header a long article Not just the heading

Give one small example of Stacking Contexts (css adv index).

position: sticky; top: 0 How z-index actually resolves overlap conflicts

What mistake do beginners make with Stacking Contexts (css adv index)?

z-index war without a stacking context Show the fix

Where do you use Stacking Contexts (css adv index)?

a long article a sticky header