Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created October 15, 2009 19:35
Show Gist options
  • Save paulirish/211209 to your computer and use it in GitHub Desktop.
Save paulirish/211209 to your computer and use it in GitHub Desktop.
find all elements with a z-index and indicate what they are.
// 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);
})
// boomarkletized:
// generated using : http://benalman.com/code/test/jquery-run-code-bookmarklet/
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.2.6",function($,L){function contrast(a){return"#"+(Number("0x"+a.substr(1)).toString(10)>16777215/2?"000000":"ffffff")}jQuery("*").filter(function(){return $(this).css("zIndex")!=="auto"}).each(function(){var a="#"+Math.floor(Math.random()*16777215).toString(16);if($(this).css("position").match(/absolute|relative/)){$(this).css("position","relative")}$(this).css("outline","1px solid "+a);$("<span>z-index: "+$(this).css("zIndex")+"</span>").css({background:a,color:contrast(a),position:"absolute",top:0,left:0,textIndent:0}).appendTo(this)});});
@mintyPT
Copy link

mintyPT commented Dec 5, 2023

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);
});

@paulirish
Copy link
Author

@mintyPT beautiful! that's much better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment