Firefox add-on for examining z-indexes [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 5 years ago.

开发者_如何学Python Improve this question

I'm working on a fairly large site and am having trouble managing z-indexes. Is there a Firefox add-on that will look at a page and give me an ordered list of every element with a z-index declared? That would save a ton of times for the cases where a z-index was wrong or hard to find.

---

You find it here

https://addons.mozilla.org/en-US/firefox/addon/60

When you have installed the Web Developer Extension, choose from its menu

Information > Display Topographic information

---

I would suggest that you use FireBug http://getfirebug.com/ You can examine you whole dom including z-indexes.

Use a little javascript to help you find all elements with z-indexes: 1. load jquery 2. insert this 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> 

if your the firebug console is not loaded it will give a red border to all the elements with a z-index and perpend the z-index value to the box.

---

Very old question at this point, but in case anybody else comes by this way, there is still (huh, 'still'... not sure if it existed when the question was posted originally or not) a Firefox add-on called 'Tilt 3D' that offers a 3D view of a webpage and is excellent for diagnosing z-index issues.

https://addons.mozilla.org/en-US/firefox/addon/tilt/

Firefox even had the same feature embedded in some kind of preview form for a few versions but later removed it. The above add-on has not been updated since 2011, but still works for the time being. Health warning though: multi-process support in Firefox is progressively coming to life with successive Firefox versions, and this add-on does not work with multi-process (also referred to as Electrolysis or just 'e10s') support enabled. More information here:

https://wiki.mozilla.org/Electrolysis