TIL z-index stacking contexts are relative...

[dogbrain]

...as opposed to global, like i thought they were this entire time until now!!! 

i was fuming over not being able to position one rotated div in front of another (despite setting the z-index of the former to a stupidly high number) so i did some light googling and discovered that, apparently, z-indexes aren't global for the whole document; rather, new stacking contexts are created if you have any number of seemingly unrelated attributes on an element, and those exist in their very own 'bubbles'. in my case, it was because the div in question was rotated with transform 

i found this medium article that was helpful in explaining how this happens, but not why it happens. if anyone knows, i'm curious what about the transform property places elements in their own stacking contexts? is there a practical reason for it?? it seems weird to me that by simply applying a cosmetic change like rotation, it triggers its own stacking context o_o but i'm probably missing something!

[Dan Q]

The simple answer is, I think... it just is.

The slightly-less-simple answer is probably... that some transformations are effectively equivalent to relative re-positioning. Which necessitates a new stacking context. So declaring in the spec that it does so could potentially allows some browser engines to short-cut their positioning engines.

That'd be my guess.