Is there a way to see the stacking context, in IE/Firefox/Chrome/etc.?
Z IndexZ Index Problem Overview
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.
Z Index Solutions
Solution 1 - Z Index
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 - Z Index
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 - Z Index
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 - Z Index
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.
Solution 5 - Z Index
in newer versions of firefox you have 3D view by pressing Ctrl+Shift+I then clicking the 3D or 3D box icon to access
Solution 6 - Z Index
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/