有没有办法在IE/Firefox/Chrome/等中查看堆叠上下文？
我在试着追踪一个z-index问题。我正在看IE9的DOM Inspector中的页面，但我就是弄不明白。
我有一个元素的z-index为10000，另一个元素的z-index为7000，但是z-index 10000低于z-index 7000。显然，在层次结构中的某个地方，有一些东西正在设置堆叠上下文，但我一直在层次结构中上下浏览，但我一直无法找到它。
据我所知，除了这两个元素之外，没有其他元素具有z索引集。和nothing作为不透明度值设置。我在FF5和IE9中看到了这一点，所以这不是旧的IE<7堆栈上下文错误。
有没有浏览器有工具可以告诉我哪个元素在设置堆叠上下文？
谢谢。
回答 6
Stack Overflow用户
发布于 2017-02-05 09:06:39
如果你使用Chrome，https://github.com/gwwar/z-context是一个简单的扩展，可以看到：
如果当前元素创建了堆栈上下文，为什么要创建索引值，以及为什么要创建其父堆栈上下文为
- z-
重要的是，正如aprohl5所说:只有当位置显式设置为固定、绝对或相对时，z索引属性才能影响堆栈顺序。
这是使用Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/管理订单的一个很好的方法。
Stack Overflow用户
发布于 2020-02-06 19:41:58
MS Edge的当前版本(使用Chromium引擎，构建版本为"Beta“、"Dev”或"Canary")现在的特点是：“在Microsoft Edge DevTools中使用3D视图调试z索引堆叠内容”
帮助调试z索引堆叠上下文的新功能。常规三维视图使用颜色和堆叠显示DOM (文档对象模型)深度的表示，z索引视图帮助您隔离页面的不同堆叠上下文。
按F12键(视窗)，然后选择下方窗格中的"3D标签“(可能需要单击"...")若要查看视觉表示，请执行以下操作。
更多信息：https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-edge-devtools/
Stack Overflow用户
发布于 2021-08-26 05:51:41
对于Chrome: chrome 3d的“层”工具可以做你想做的大部分事情，我相信(类似于另一个针对MS Edge的答案)
在dev工具>溢出菜单/3点(默认情况下隐藏)>‘更多工具’>‘层’中找到它
https://www.youtube.com/watch?v=6je49J67TQk
https://stackoverflow.com/questions/6800511
复制相似问题
腾讯云开发者
