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 100

Answer 1

For z-index to work, you have to explicitly set the position to fixed, absolute, or relative.

Here's a great explanation: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 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" to view a visual representation.

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

Answer 3

in newer versions of firefox you have 3D view by pressing Ctrl+Shift+I then clicking the 3D or 3D box icon to access

Answer 4

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/