Firefox add-on for examining z-indexes

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.

Answers


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


Need Your Help

How can I insert large files in MySQL db using PHP?

php mysql blob large-files

I want to upload a large file of maximum size 10MB to my MySQL database. Using .htaccess I changed PHP's own file upload limit to "10485760" = 10MB. I am able to upload files up to 10MB without any

Histogram with stacked components

python matplotlib pandas seaborn

Let's say that I have a value that I've measured every day for the past 90 days. I would like to plot a histogram of the values, but I want to make it easy for the viewer to see where the measurem...