Css 用于检查z索引的Firefox插件

我在一个相当大的网站上工作，在管理z索引时遇到问题。是否有一个Firefox插件可以查看页面并给我一个每个元素的有序列表，其中声明了z索引？这将为z索引错误或难以找到的情况节省大量时间。

您可以在这里找到它

安装Web Developer扩展后，从其菜单中选择

Information > Display Topographic information

---

我建议你使用FireBug 您可以检查整个dom，包括z索引

使用一点javascript来帮助您查找具有z索引的所有元素： 1.加载jquery 2.插入以下javascript：

<script type="text/javascript"> 
//replacethis by the elemets that could have a z index ('div, span, etc..')
$('replacethis').each(function(){ 
 if ($(this).css('z-index')) {
  var zindex = $(this).css('z-index')
  if (window.console) {
   console.log($(this), zindex)
  }else{
   $(this).css('border', '1px solid red').prepend('<strong>' + zindex +'</strong>')
  }
 }; 

}); 
</script> 

//将其替换为可能具有z索引的元素（'div、span等…）
$（'replacethis'）。每个（函数（）{
if（$（this.css（'z-index'））{
var zindex=$（this.css（'z-index'））
if（window.console）{
log（$（this），zindex）
}否则{
$（this.css（'border'，'1px实心红色'）。前置（''+zindex+''））
}
}; 
}); 

---

如果您的firebug控制台未加载，它将为所有具有z索引的元素提供一个红色边框，并将z索引值垂直于框。

这是一个非常老的问题，但如果其他人通过这种方式来，仍然会有（嗯，‘仍然’…不确定问题最初发布时是否存在）Firefox插件“Tilt 3D”提供网页的3D视图，非常适合诊断z索引问题

Firefox甚至在一些版本的预览表单中嵌入了相同的功能，但后来将其删除。上述附加组件自2011年以来一直没有更新，但目前仍然有效尽管健康警告：Firefox中的多进程支持在连续的Firefox版本中逐渐活跃起来，并且此附加组件在启用多进程（也称为电解或“E10”）支持时不起作用。更多信息请点击此处：

---

我确实使用了FireBug，但它没有一个视图，只能显示声明了z索引的元素，对吗？没错，但单击元素可以查看是否有z索引。使用firebug并使用一点javascript来帮助您查找具有z索引的所有元素：1。加载jquery2。通过可能有z索引（'div，span，etc..'）$（'replacethis'）的元素插入此javascript://replacethis。每个（function（）{if（$（this）.css（'z-index'））{console.log（$（this））}）确保firebug控制台处于打开状态。如何使用Web Developer检查具有z索引的元素列表？通常有一个Web Developer工具栏，单击“信息”，然后显示元素信息，将在您悬停的元素周围显示一个红色小框，单击它，左上角将显示一个黄色小框，其中包含元素所携带的所有属性。键盘快捷键Ctrl+Shift+F。另外，在相同的信息下拉列表中，单击“显示堆栈级别”。太棒了！“显示堆栈级别”正是我想要的。这是一个很棒的工具，我一直都在使用它，我可以自动启动我工作的站点并直接按ctrl+shif+f！很高兴这对你有帮助。我发现这很有用：