What's the best way to approach z-index issues?

Developer Tools
#1

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)

#2

In the second half of 2016, students worked with @gregtatum on a z-index devtools prototype.

The code for the current prototype is at https://github.com/gregtatum/z-index-devtool . Hopefully it will evolve into an actual devtools panel (or extension) this year!

2 Likes
#3

I just played a bit with the prototype. Looks promising.

Hopefully it will evolve into an actual devtools panel (or extension) this year!

To me it would feel most ‘natural’ if this was somehow part of the Inspector, also for discoverability. Maybe somehow directly integrated, or like a (toggable) tool like the eyesdropper.

Anyway, for now I’ll wait until this lands… and keep on clicking through the DOM :wink:

#4

@jdescottes already mentioned the z-index tool prototype. I think this is a really cool tool that would definitely help a lot with situations like these.

The hard part when it comes to z-indexes, is understanding stacking contexts.
But even if you do, then you still have to figure out what the stacking context tree looks like in a potentially huge DOM with (as you said) z-indexes being added by libraries you might not know about. That’s not easy nor fun.

So a tool that walks the DOM for you searching for z-indexes and stacking contexts and that, then, shows you the reasons why an element is below another one would be awesome!

Before that becomes a reality though, you could use some JS to avoid having to click around in the inspector and search for elements.
Here’s an example, with some comments explaining how to use it at the bottom: https://gist.github.com/captainbrosset/7ae0641e531db93048fc01a8b87c1a0e

1 Like
#5

@gregtatum just curious, are there any news/updates on integrating the z-index-devtools? I’m hitting this “problem area” quite frequently…

#6

I’m not personally planning on working on this. I think the project would be decently straight-forward to turn into a web extension. I’d be willing to mentor and code review anyone who wanted to take on that work. I know Gabriel Luong (I can’t seem to find him on the @ mention here) has expressed interest in rolling that work into the devtools inspector, but right now there’s no time frame for it.

#7

I filed an issue outlining the work to turn it into a web extension: https://github.com/gregtatum/z-index-devtool/issues/81

1 Like
Any chance of bringing back the Tilt 3d View?