Say you have a page that suddenly looks like this:
(so elements overlap each other) and the markup is full of nested divs. And many of the divs and z-index are added dynamically by some external js lib.
What’s the best approach to debug this?
Currently, I set the “Filter Styles” of the Rules View to ‘z-index’ and then I click through all divs that might cause this to see if it has a ‘z-index’, or I grep through the sources for ‘z-index’. Most often I just fall back to setting yet another really high z-index on the div that should be in foreground.
Any tools or workflows for handling z-index? (I know of Tilt 3D but it stopped working due to multi-process before I could ever use it, so I do not know)