Some console output to help you visualise stacking contexts on a page (no jquery)

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. 
 */

function highlight(el) {
  el.style.outline = '3px solid red';
}

function css(el, property) {
  return window.getComputedStyle(el)[property];
}

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

  console.groupEnd();
}

Array.from(document.querySelectorAll("*")).forEach(function(el){ 
  var zindex = css(el, 'z-index');
  var disp = css(el, 'display');
  var position = css(el, 'position');
  var opacity = parseFloat(css(el, 'opacity'));
  var transform = css(el, 'transform');
  var filter = css(el, 'filter');
  
  // Tests
  
  // z-index !== auto, position != static || display == flex
  if ((zindex !== "auto") && ((position !== "static") || (disp === "flex"))) {
    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);
  }
})