So I changed the z-index of Div A to be 5 or something. But it didn’t work! In Firefox, div A was on top, but in Chrome, Div B was on top. Argh! Why?
... why indeed? I can't think of any (presumably fairly simple) scenario where that would happen.
... why indeed? I can't think of any (presumably fairly simple) scenario where that would happen.
>>> getComputedStyle(document.getElementById('prev')).zIndex
"0"
I think this is a bug in Chrome, where it's short-circuiting the new stacking context when a transform is specified, and not propagating the z-index to the new stacking context. The CSS spec says ( https://www.w3.org/TR/css-transforms-1/ ):
> If an element with a transform is positioned, the z-index property applies as described in [CSS2], except that auto is treated as 0 since a new stacking context is always created.
This element is positioned, so z-index should be affecting it.
You can fix it by moving the transform to the child here, but it requires a bit of finagling. Nice catch!