Some console output to help you visualise stacking contexts on a page

visualize-stacking-contexts.js

/*
Usage:
 * Paste this into your dev tools console (or even better as a snippet)
 * It will parse the page and find all the things that create a new stacking context 
   and dump some info about them to the console. It will also outline them on the page.
   
 * This is pretty rough and probably misses heaps of bugs and edge cases. 
 */


// TODO: remove the jquery dependency (or inject it onto page) 

function highlight($el) {
  $el.css('outline', '3px solid red');
}

function log($el) {
  console.group('New Stacking context');
  console.log($el[0]);
  console.log('z-index: ',  $el.css('z-index') );
  console.log('position: ', $el.css('position'));
  console.log('opacity:',   $el.css('opacity'));
  console.log('transform:', $el.css('transform'));
  console.log('filter:',    $el.css('filter'));


  console.groupEnd();
}

$('*').filter(function(){ 
  var $el = $(this);
  var zindex = $el.css('z-index');
  var position = $el.css('position');
  var opacity = parseFloat($el.css('opacity'));
  var transform = $el.css('transform');
  var filter = $el.css('filter');


  
  // Tests
  
  // z-index !== auto, position != static
  if ((zindex !== "auto") && (position !== "static")) {
    highlight($el);
    log($el);
  }
  
  // opacity < 1
  if (opacity < 1) {
    highlight($el);
    log($el);
  }
  
  // position == sticky|fixed (on some chromes)
  if (position == "fixed" || position == "sticky") {
    highlight($el);
    log($el);
  }
  
  // css transform
  // TODO: account for vendor prefixes?
  if (transform !== "none") {
    highlight($el);
    log($el);
  }
  
  // css filter
  // TODO: account for vendor prefixes?
  if (filter !== "none") {
    highlight($el);
    log($el);
  }
  
})

FYI I removed the jQuery dependency in this fork: https://gist.github.com/tlrobinson/17cd4fee64afb1f60450bec621604de7

Neat tool, thanks!