我正在尝试追踪z-index问题。我正在查看IE9的DOM Inspector中的页面，我无法理解它。
我有一个z-index为10000的元素，另一个z-index为7000的元素，但z-index 10000在z-index 7000之下绘制。显然在层次结构的某个地方，设置了一些东西堆叠上下文，但我一直在层次结构中上下浏览，但我找不到它。
据我所知，除了这两个元素之外，还有一个z-index集。并没有任何不透明度值设置。我在FF5和IE9中看到了这一点，所以它不是旧的IE＆lt; 7堆叠上下文错误。
是否有任何浏览器都有一个工具可以告诉我哪个元素正在设置堆叠上下文？
感谢。
答案 0 :(得分：11)
如果您使用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/
保存订单的好方法答案 1 :(得分：6)
当前的MS Edge（使用带有“ Beta”，“ Dev”或“ Canary”版本的Chromium引擎）具有：“在Microsoft Edge DevTools中使用3D视图调试z-index堆栈内容” < / p>
”一项有助于调试z-index堆叠上下文的新功能。常规3D视图使用颜色和堆叠显示DOM（文档对象模型）深度的表示，而z-Index视图可帮助您隔离页面的不同堆叠上下文。”
按F12键（Windows），然后选择“ 3D选项卡”以查看视觉表示。
更多信息： https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-edge-devtools/
答案 2 :(得分：1)
对于 Google Chrome 和 Firefox，我创建了一个开源扩展，它不仅会告诉您元素是否创建了 z-index 及其原因，而且还会显示页面中所有堆叠上下文的树状视图，以及他们与 z-index 值竞争的堆叠上下文。您可以直接在浏览器开发工具中查看所有这些信息，查看 github page 了解更多信息。
答案 3 :(得分：-1)
在较新版本的firefox中，您按{Ctrl + Shift + I然后点击3D或3D框图标进行访问
3D view答案 4 :(得分：-3)
要使z-index起作用，您必须将位置显式设置为固定，绝对或相对。
以下是一个很好的解释：http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/