What is a CSS stacking context and why do z-index bugs happen?

A stacking context is a rendering layer that controls how elements stack. **z-index bugs happen because:** - `z-index` only works on positioned elements (or flex/grid items in some cases). - New stacking contexts are created by properties like `position` + `z-index`, `transform`, `opacity < 1`, `filter`, etc. **Debug tip:** inspect stacking contexts in devtools and minimize unnecessary `z-index` by using layout structure and component layering rules.