Last Updated: February 25, 2016
·
301
· mcwebb

Transforms affect computed z-index values

If you're ever pulling your hair out over z-index issues wherein two positioned sibling elements with "z-index: auto" are still in separate stacking contexts, the issue quite possibly that a transform has also been applied to one or both of the siblings.

Applying a transform seems to force the computed z-index value to be "0" instead of "auto". This distinction is generally moot, however a zero value creates a new stacking context whereas an auto value does not. This can be an issue when one of the siblings have a descendant which you'd like to have a higher effective z position than the other sibling element.