有没有办法在IE/Firefox/Chrome /等中查看堆叠上下文？
我正在尝试追踪z-index问题.我正在查看IE9的DOM Inspector中的页面,我无法弄明白.
我有一个z-index为10000的元素,另一个z-index为7000,但z-index 10000是在z-index 7000之下绘制的.显然在层次结构的某个地方,有些东西正在设置堆栈上下文,但我一直在层次结构中浏览,我一直无法找到它.
除了这两个元素,我所能看到的只有一个z-index集.而且没有任何不透明度值设置.我在FF5和IE9中看到了这一点,所以它不是旧的IE <7堆叠上下文错误.
任何浏览器都有一个工具可以告诉我哪个元素正在设置堆叠上下文？
谢谢.
cca*_*ner 35
对于 Chrome：chrome 3d“图层”工具可以完成您想要的大部分功能，我相信（类似于针对 MS Edge 的其他答案）
在开发工具>溢出菜单/3个点（默认隐藏）>“更多工具”>“图层”中找到它
https://www.youtube.com/watch?v=6je49J67TQk
iia*_*chu 19
如果你使用Chrome https://github.com/gwwar/z-context是一个简单的扩展,可以看到:
- 如果当前元素创建堆叠上下文,为什么
- 它的父堆叠上下文是什么
- z-index值
并且很重要,就像aprohl5所说:只有当位置显式设置为fixed,absolute或relative时,z-index属性才会影响堆栈顺序.
这是与Sass保持订单的好方法 https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
- 这似乎不再对我有用，请参阅此问题：https://github.com/gwwar/z-context/issues/11 (5认同)
Tim*_*son 13
当前的 MS Edge（使用带有“Beta”、“Dev”或“Canary”版本的 Chromium 引擎）现在具有：“在 Microsoft Edge DevTools 中使用 3D 视图调试 z-index 堆叠内容”
“帮助调试 z-index 堆叠上下文的新功能。通用 3D 视图使用颜色和堆叠显示 DOM（文档对象模型）深度的表示，z-Index 视图可帮助您隔离页面的不同堆叠上下文.”
按 F12 (Windows)，然后选择下方窗格中的“3D 选项卡”（可能必须单击“...”）以查看可视化表示。
更多信息：https : //blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-edge-devtools/
- 很棒的工具！我使用[Layers - Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#layers)来查看图层，它有一些效果。 (2认同)
对于 Google Chrome 和 Firefox，我创建了一个开源扩展，它不仅告诉您元素是否创建 z-index 以及原因，而且还显示页面中所有堆叠上下文的树状视图以及堆叠上下文他们正在就 z-index 值进行竞争。您可以直接在浏览器开发工具中查看所有这些信息，请查看github 页面以获取更多信息。