find all elements with a z-index and indicate what they are.

zIndex-bookmarklet.js

// find all elements with a z-index and indicate what they are.
// uses css outline which is not supported in IE <8

function contrast(color){ return '#' + 
   (Number('0x'+color.substr(1)).toString(10) > 0xffffff/2 ? '000000' :  'ffffff'); 
}

jQuery('*')
    .filter(function(){ return $(this).css('zIndex') !== 'auto'; })
    .each(function(){
         var color = '#'+Math.floor(Math.random()*16777215).toString(16); // <3 temp01
		 
         if ($(this).css('position').match(/absolute|relative/)) $(this).css('position','relative');
         $(this).css('outline','1px solid '+color);
         $('<span>z-index: '+ $(this).css('zIndex') + '</span>')
           .css({'background':color, color: contrast(color), position:'absolute', top:0,left:0,textIndent:0})
           .appendTo(this);
     })

Just wanted this but just to run in the Chrome console, so I converted it to a jquery-free version

function contrast(color) {
    return '#' +
        (Number('0x' + color.substr(1)).toString(10) > 0xffffff / 2 ? '000000' : 'ffffff');
}

Array.from(document.querySelectorAll('*')).filter(function (el) {
    return getComputedStyle(el).zIndex !== 'auto';
}).forEach(function (el) {
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);

    var position = getComputedStyle(el).position;
    /*if (position.match(/absolute|relative/)) {
        el.style.position = 'relative';
    }*/
    el.style.outline = '1px solid ' + color;

    var span = document.createElement('span');
    span.innerText = 'z: ' + getComputedStyle(el).zIndex;
    span.style.background = color;
    span.style.color = contrast(color);
    span.style.position = 'absolute';
    span.style.top = '0';
    span.style.left = '0';
    span.style.textIndent = '0';

    el.appendChild(span);
});

@mintyPT beautiful! that's much better.