Is there a way to see the stacking context, in IE/Firefox/Chrome/etc.?

Question

I'm trying to track down a z-index problem. I'm looking at the page in IE9's DOM Inspector, and I just can't figure it out.

I have one element with a z-index of 10000, and another with a z-index of 7000, and yet the z-index 10000 is drawing below the z-index 7000. Clearly somewhere in the hierarchy, something is setting a stacking context, but I've been browsing up and down the hierarchy and I haven't been able to find it.

Nothing other than these two elements, so far as I can see, has a z-index set. And nothing as a opacity value set. and I'm seeing this in FF5 and IE9, so it's not the old IE<7 stacking context bug.

Do any of the browsers have a tool that will tell me which element is setting a stacking context?

Thanks.

Solution 1

If you use Chrome https://github.com/gwwar/z-context is a simple extension to see:

• If the current element creates a stacking context, and why
• What its parent stacking context is
• The z-index value

and important, like aprohl5 said: The z-index property can affect the stack order only if the position is explicitly set to fixed, absolute, or relative.

This is a nice way to mantain order with Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/

Solution 2

The current of MS Edge (using the Chromium engine with a build of "Beta", "Dev", or "Canary") now features: "Debug z-index stacking content with 3D View in the Microsoft Edge DevTools"

"a new feature to help debug z-index stacking context. The general 3D View shows a representation of the DOM (Document Object Model) depth using color and stacking, and the z-Index view helps you isolate the different stacking contexts of your page."

Press F12 (Windows), and then select the "3D tab" in the lower pane (may have to click "...") to view a visual representation.

More information: https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-edge-devtools/

Solution 3

For Chrome: the chrome 3d 'layer' tool does most of what you'd want I believe (similar to the other answer which is for MS Edge)

Find it in dev tools > overflow menu / 3 dots (hidden by default) > 'more tools' > 'layers'

https://www.youtube.com/watch?v=6je49J67TQk

Solution 4

For Google Chrome and Firefox, I've created an open source extension that not only tells you if the element creates a z-index and why, but also shows a tree-like view of all stacking contexts in the page, and the stacking contexts that they're competing with regarding to the z-index value. You can see all these informations directly in the browser devtools, check out the github page for more info.

CSS stacking context inspector for Chrome

CSS stacking context inspector for Firefox

View more solutions

Comments

[Jeff Dege]

Yes. I can explore the DOM tree in it, and identify which elements have z-index set. But my problem seems to be that something is creating a stacking context, without having a z-index set, and I'm not seeing anything in Firebug that helps me find it.

[terrinecold]

I'd also be interested by an answer to this question for chrome

[terrinecold]

this is not answering the question which is about how to find out which element is being used as a stacking context

[aprohl5]

What it does do is give a possible solution to the problem. Perhaps Mr. Dege was not aware that you have to set the position for z-index to work.

[TiGR]

It seems that it does not show stacking contexts, so it is not really helpful.

[primavera133]

From Firefox 47 onwards, 3D view is no longer available.

[goddamnyouryan]

This doesn't seem to be working anymore for me, see this issue: github.com/gwwar/z-context/issues/11

[feng zhang]

Awesome tool! I used Layers - Chrome DevTools to view layers, it has some effects.

[Jehong Ahn]

@goddamnyouryan I have no problem on chrome 86.

[trig79]

bloody amazing!

[Drago96]

Hi @hyena. Once installed, the extension will add two sections in the browser devtools that will allow you to get informations about the stacking contexts. For a detailed explanation, you can visit the github page: github.com/andreadev-it/stacking-contexts-inspector

[pagep]

Is this (3D view) added to regular Chrome too? I couldn't find it - the layers doesn't work the same way for me. But the one in Edge works great. Thanks

[T H]

@pagep, no this is only in MS Edge. Others have added answers on how to do it in Chrome.

[Drago96]

Actually, the z-index property will work whenever a stacking context is created. That means that even if you use the "transform" property (or you set opacity < 1) will make the z-index property "magically" work. Understanding what are stacking context is the way to go, and you can use some tool to analyze those.

[ukrutt]

This is great. I've been looking for something like this ever since z-context stopped working. Thank you!

[Sandre]

This doesn't seem to be working for me on localhost but working on the test page developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/… chrome 97 windows