有没有办法在 IE/Firefox/Chrome/等中查看堆叠上下文？答案

【问题标题】：Is there a way to see the stacking context, in IE/Firefox/Chrome/etc.?有没有办法在 IE/Firefox/Chrome/等中查看堆叠上下文？
【发布时间】：2011-07-23 12:57:04
【问题描述】：

我正在尝试查找 z-index 问题。我正在查看 IE9 的 DOM Inspector 中的页面，但我无法弄清楚。

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

据我所知，除了这两个元素之外，没有其他元素具有 z-index 集。并且没有任何不透明度值集。我在 FF5 和 IE9 中看到了这一点，所以这不是旧的 IE

是否有任何浏览器有工具可以告诉我哪个元素正在设置堆叠上下文？

谢谢。

【问题讨论】：

是的。我可以探索其中的 DOM 树，并确定哪些元素设置了 z-index。但我的问题似乎是某些东西正在创建一个堆叠上下文，而没有设置 z-index，而且我在 Firebug 中没有看到任何可以帮助我找到它的东西。
我也对 chrome 的这个问题的答案感兴趣

标签： z-index

【解决方案1】：

如果你用 Chrome https://github.com/gwwar/z-context 是一个简单的扩展看看：

如果当前元素创建了堆叠上下文，以及为什么

它的父堆叠上下文是什么

z-index 值

而且很重要，就像 aprohl5 所说的那样：z-index 属性只有在位置显式设置为固定、绝对或相对时才会影响堆栈顺序。

这是使用 Sass 维护订单的好方法https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/

【讨论】：

这似乎对我不起作用了，请参阅这个问题：github.com/gwwar/z-context/issues/11
@goddamnyouryan 我在 chrome 86 上没有问题。
实际上，只要创建了堆叠上下文，z-index 属性就会起作用。这意味着即使您使用“transform”属性（或设置 opacity
这似乎对我在本地主机上不起作用，但在测试页面上工作 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/… chrome 97 windows

【解决方案2】：

当前的 MS Edge（使用带有“Beta”、“Dev”或“Canary”版本的 Chromium 引擎）现在具有：“在 Microsoft Edge DevTools 中使用 3D 视图调试 z-index 堆叠内容”

“帮助调试 z-index 堆叠上下文的新功能。一般 3D 视图使用颜色和堆叠显示 DOM（文档对象模型）深度，z-Index 视图帮助您隔离页面的不同堆叠上下文。”

按 F12 (Windows)，然后在下部窗格中选择“3D 选项卡”（可能需要单击“...”）以查看可视化表示。

【讨论】：

很棒的工具！我用Layers - Chrome DevTools查看图层，有一些效果。
太棒了！
这个（3D 视图）是否也添加到常规 Chrome 中？我找不到 - 这些图层对我来说的工作方式不同。但是Edge中的那个效果很好。谢谢
@pagep，不，这仅在 MS Edge 中。其他人添加了有关如何在 Chrome 中执行此操作的答案。

【解决方案3】：

对于 Chrome：chrome 3d 'layer' 工具可以完成我相信的大部分工作（类似于 MS Edge 的其他答案）

在开发工具中找到它>溢出菜单/3个点（默认隐藏）>“更多工具”>“图层”

https://www.youtube.com/watch?v=6je49J67TQk

【讨论】：

【解决方案4】：

对于 Google Chrome 和 Firefox，我创建了一个开源扩展，它不仅可以告诉您元素是否创建 z-index 及其原因，还可以显示页面中所有堆叠上下文的树状视图，以及他们与 z-index 值竞争的堆叠上下文。您可以直接在浏览器 devtools 中查看所有这些信息，查看github page 了解更多信息。

CSS stacking context inspector for Chrome

CSS stacking context inspector for Firefox

【讨论】：

嗨@hyena。安装后，扩展程序将在浏览器开发工具中添加两个部分，允许您获取有关堆叠上下文的信息。详细解释可以访问github页面：github.com/andreadev-it/stacking-contexts-inspector
这很棒。自从 z-context 停止工作以来，我一直在寻找这样的东西。谢谢！

【解决方案5】：

在较新版本的 firefox 中，您可以通过按 Ctrl+Shift+I 然后单击 3D 或 3D 框图标来访问 3D view

【讨论】：

它似乎没有显示堆叠上下文，所以它并没有真正的帮助。
从 Firefox 47 开始，3D 视图不再可用。

【解决方案6】：

要使 z-index 起作用，您必须将位置显式设置为固定、绝对或相对。

这里有一个很好的解释：http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

【讨论】：

这不是回答关于如何找出哪个元素被用作堆叠上下文的问题
它所做的是为问题提供可能的解决方案。也许德格先生不知道您必须设置位置才能使 z-index 起作用。