90

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.

Jeff Dege
  • 11,190
  • 22
  • 96
  • 165
  • 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 '11 at 15:02
  • 7
    I'd also be interested by an answer to this question for chrome – terrinecold Jun 07 '13 at 09:17

6 Answers6

43

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/

iianfumenchu
  • 898
  • 9
  • 14
  • 4
    This doesn't seem to be working anymore for me, see this issue: https://github.com/gwwar/z-context/issues/11 – goddamnyouryan Feb 12 '20 at 17:34
  • @goddamnyouryan I have no problem on chrome 86. – Jehong Ahn Oct 28 '20 at 02: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 09 '21 at 20:14
  • This doesn't seem to be working for me on localhost but working on the test page https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context chrome 97 windows – Sandre Jan 26 '22 at 08: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. – Ingo Steinke Jul 28 '22 at 15:31
32

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

ccarner
  • 566
  • 4
  • 6
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/

T H
  • 492
  • 5
  • 15
  • 3
    Awesome tool! I used [Layers - Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#layers) to view layers, it has some effects. – feng zhang May 31 '20 at 06:19
  • bloody amazing! – trig79 Mar 19 '21 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 '21 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 '21 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

Drago96
  • 1,265
  • 10
  • 19
  • 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: https://github.com/andreadev-it/stacking-contexts-inspector – Drago96 May 12 '21 at 08:04
  • This is great. I've been looking for something like this ever since z-context stopped working. Thank you! – ukrutt Sep 16 '21 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

Jon B
  • 497
  • 1
  • 9
  • 25
-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/

aprohl5
  • 101
  • 1
  • 1
  • 8
  • 5
    this is not answering the question which is about how to find out which element is being used as a stacking context – terrinecold Jun 07 '13 at 09: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 '13 at 01:40