Stacking context

A stacking context is a local z-axis universe. Children are ordered inside it; they cannot paint above siblings outside the parent context no matter how large z-index grows.

Common context creators: positioned element with z-index other than auto, opacity less than 1, transform, filter, isolation: isolate, will-change on certain properties, contain with paint, and more.

					.modal-root {
  isolation: isolate; /* deliberate overlay root */
  z-index: 100;
}
.sidebar {
  transform: translateZ(0); /* creates context — tooltips may trap here */
  z-index: 1;
}
				

On interviews: debug z-index by finding context boundaries before increasing numbers.

Common pitfalls: arbitrary z-index: 9999 across the app; animating transform on a parent traps dropdowns and modals.

The trade-off is quick layering hacks versus planned overlay roots — portal-like roots with isolation scale better.

Checklist:

• Find what creates each stacking context.
• Compare siblings only within the same context.
• Plan overlay and tooltip roots deliberately.
• Avoid z-index inflation.