zindex_debug.js

// based on this tweet: https://twitter.com/g_marty/status/6714909630926848

// jQuery must be loaded
// if it's not, use this: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/

// run the code below, then click any element you want. that element and all of its z-indexed ancestors are printed to the console

(function() {

$('*').off(); // optional. use this if other js events are blocking propagation
$('body').on('click', '*', function(event) { // use one() to only execute once
  event.preventDefault();
  event.stopPropagation();
  $(event.target).parents().addBack().each(function() {
    $(this).css("z-index") != "auto" && console.log($(this).css('z-index'), this);
  });
});

// simple highlighting on hover, if you want it
$('*').hover(
  function(e){ $(this).css('border', '1px solid red') ;e.stopPropagation(); },
  function(e){ $(this).css('border', 'none'); e.stopPropagation(); } 
);

})();

Awesome, thanks for the script, it's very useful!

I modified mine to use to 'outline' instead of 'border'

Tried to run bookmarklet and get:

(index):1 Refused to execute script from 'https://gist.github.com/lyoshenka/8637330/raw/152d3649b7ea4320f998dea64beec83cf6a4675a/zindex_debug.js?0.9984795001801103' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.