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

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/