92

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.

2
  • 1
    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.
    – Jeff Dege
    Jul 24, 2011 at 15:02
  • 7
    I'd also be interested by an answer to this question for chrome Jun 7, 2013 at 9:17

6 Answers 6

44

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/

5
  • 4
    This doesn't seem to be working anymore for me, see this issue: github.com/gwwar/z-context/issues/11 Feb 12, 2020 at 17:34
  • @goddamnyouryan I have no problem on chrome 86.
    – Jehong Ahn
    Oct 28, 2020 at 2:19
  • 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.
    – Drago96
    Sep 9, 2021 at 20:14
  • 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
    – Sandre
    Jan 26, 2022 at 8:26
  • I can confirm this works in Chrome 103.0.5060.134 on 64-bit Ubuntu Linux 20.04 LTS and it also works in my latest (Chromium based) Vivaldi (after restart). Adding this comment also to remind myself to upvote this answer when my daily post vote limit on StackOverflow allows me to do so. Jul 28, 2022 at 15:31
33

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

Image Demoing 3d layer tool

23

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.

enter image description here

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

4
  • 3
    Awesome tool! I used Layers - Chrome DevTools to view layers, it has some effects.
    – feng zhang
    May 31, 2020 at 6:19
  • bloody amazing!
    – trig79
    Mar 19, 2021 at 10:16
  • 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
    – pagep
    Aug 25, 2021 at 15:53
  • @pagep, no this is only in MS Edge. Others have added answers on how to do it in Chrome.
    – T H
    Aug 25, 2021 at 16:53
8

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

2
  • 1
    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
    – Drago96
    May 12, 2021 at 8:04
  • This is great. I've been looking for something like this ever since z-context stopped working. Thank you!
    – ukrutt
    Sep 16, 2021 at 12:37
-2

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

2
  • It seems that it does not show stacking contexts, so it is not really helpful.
    – TiGR
    Jul 15, 2014 at 16:14
  • 13
    From Firefox 47 onwards, 3D view is no longer available. Aug 17, 2016 at 13:13
-3

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/

2
  • 5
    this is not answering the question which is about how to find out which element is being used as a stacking context Jun 7, 2013 at 9:17
  • 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.
    – aprohl5
    Aug 12, 2013 at 1:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.