Back to the Catalog
css
frontend

CSS Stacking Contexts & z-index: Real Problems, Real Fixes

12 questions

Why z-index: 9999 sometimes does nothing, what silently creates a stacking context, how the paint order actually works, and when isolation: isolate is the surgical fix. Every answer is proven from the CSS painting rules, not recalled.

Start

Questions

  1. Not answered. Why does z-index: 9999 leave the dropdown behind the hero?
  2. Not answered. Which of these create a new stacking context on their own?
  3. Not answered. Adding a fade-in broke the tooltip — why?
  4. Not answered. Which single declaration best contains a component's z-index?
  5. Not answered. Which box wins the overlap — with no z-index anywhere?
  6. Not answered. z-index: -1 made the child vanish behind its parent — why?
  7. Not answered. Why does z-index: 1 apply to this static .item?
  8. Not answered. What is the default z-index keyword?
  9. Not answered. Which statements about painting and stacking are true?
  10. Not answered. Why doesn't this position: fixed modal cover the viewport?
  11. Not answered. Which ancestor styles re-anchor a position: fixed child to the ancestor?
  12. Not answered. What's the right fix so the caption blends only with the photo?