Z index 有没有办法在IE/Firefox/Chrome/等中查看堆叠上下文。？

我想找出一个z指数问题。我正在看IE9的DOM Inspector中的页面，我就是想不出来

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

---

就我所见，除了这两个元素之外，没有其他元素有z索引集。“不透明度”值设置为零。我在FF5和IE9中看到了这一点，所以它不是旧的IE要使z-index起作用，必须显式地将位置设置为固定、绝对或相对

---

这里有一个很好的解释：

在较新版本的firefox中，您可以按Ctrl+Shift+I，然后单击3D或3D框图标访问，如果您使用Chrome是一个简单的扩展：

• 如果当前元素创建堆叠上下文，为什么
• 它的父堆栈上下文是什么
• z索引值

重要的是，正如aprohl5所说：只有当位置显式设置为固定、绝对或相对时，z-index属性才能影响堆栈顺序

这是一个很好的方式来维持与Sass的订单

当前的MS Edge（使用Chromium引擎构建“Beta”、“Dev”或“Canary”）现在的功能是：“在Microsoft Edge开发工具中调试具有3D视图的z索引堆叠内容”

帮助调试z索引堆叠上下文的新功能。常规3D视图使用颜色和堆叠显示DOM（文档对象模型）深度的表示，z索引视图帮助您隔离页面的不同堆叠上下文

按F12（Windows），然后选择“3D选项卡”以查看视觉表示

更多信息：

---

对于Google Chrome和Firefox，我创建了一个开源扩展，它不仅可以告诉您元素是否创建了z索引以及为什么创建z索引，还可以显示页面中所有堆叠上下文的树状视图，以及它们与z索引值竞争的堆叠上下文。您可以直接在浏览器devtools中查看所有这些信息，有关详细信息，请查看

---

是的。我可以探索其中的DOM树，并确定哪些元素具有z索引集。但我的问题似乎是有些东西在创建堆叠上下文，而没有z索引集，我在Firebug中没有看到任何有助于我找到它的东西。我还对这个问题的答案感兴趣，因为Chrometh没有回答这个问题，这个问题是关于如何找出哪个元素被用作堆栈上下文它所做的是为这个问题提供一个可能的解决方案。也许Dege先生不知道你必须设置z-index的位置才能工作。它似乎不显示堆叠上下文，因此没有真正的帮助。从Firefox 47开始，3D视图不再可用。这似乎不再适用于我，请看这个问题：@goddamnyoryan我在chrome 86上没有问题。很棒的工具！我过去常看图层，它有一些效果。真是太神奇了！这是怎么回事？嗨，土狼。一旦安装，扩展将在浏览器devtools中添加两个部分，这将允许您获取有关堆叠上下文的信息。有关详细说明，您可以访问github页面：我现在已相应地编辑了我的答案：）