有没有办法在 IE/Firefox/Chrome 等浏览器中查看堆栈上下文？

我正在追踪一个 Z 指数问题。我正在看 IE9 DOM 检查器中的页面，我就是搞不明白。

有一个元素的 z-index 为10000，另一个元素的 z-index 为7000，但是 z-index 10000在 z-index 7000下面。很明显，在层次结构的某个地方，某个东西正在设置一个堆叠上下文，但我在层次结构中上下浏览，一直找不到它。

据我所知，除了这两个元素之外，没有其他元素具有 z 索引集。没有不透明值集。我在 FF5和 IE9中看到了这个，所以这不是旧的 IE < 7堆栈上下文错误。

有没有哪个浏览器有一个工具可以告诉我哪个元素在设置堆栈上下文？

谢谢。

40989 次浏览
小开

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/

小开

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

小开
最佳答案

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/

小开

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/

小开

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

小开

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


提交答案