Flexbo saysz-index stacks positioned elements front-to-back — but only within their stacking context.
z-index orders overlapping positioned elements (higher = front). The catch: it only compares siblings within the same stacking context. Properties like opacity < 1, transform, and position:fixed create new contexts — why a huge z-index sometimes "doesn't work."
Power-ups you unlock
z-index orders positioned elements (higher = front)
Only works on positioned (non-static) elements
Compares within a stacking context, not globally
opacity/transform/filter create new contexts
The Float Phantom attacks — common mistakes
z-index on a static element (no effect)
Expecting z-index:9999 to beat a separate context
z-index wars instead of fixing context structure
Boss battleOverlap two positioned boxes and bring the back one forward with z-index.