Highest Z-index Script

Created from an SO answer https://stackoverflow.com/questions/1118198/how-can-you-figure-out-the-highest-z-index-in-your-document

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.2.1/mocha.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.2.1/mocha.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.0.0/chai.min.js"></script>
<div class="wrapper">
  <div class="box z-10">
    1
  </div>
  <div class="box z-4000">
    2
  </div>
  <div class="box z-50000">
    3
  </div>
   <div class="box" style="z-index: 40000">
    4
  </div>
</div>

<div id="mockDiv" style="display: none">
</div>
<div id="mocha"></div>

SCSS

$zIndexList: 10,
30,
4000,
40,
50000,
60000;

/* Create random color for brands */
/* http://geoffgraham.me/randomize-sass */
/* from https://gist.github.com/jamiewilson/aa98a81e0d0955fbf068 */
$s-min: 20;
$s-max: 70;
$l-min: 30;
$l-max: 90;

@each $zIndex in $zIndexList {
  .z-#{$zIndex} {
    z-index: #{$zIndex};
    background-color: hsl(random(360), $s-min+random($s-max+-$s-min), $l-min+random($l-max+-$l-min));
  }

  .z-#{$zIndex}:after {
    content: '\azindex=#{$zIndex}';
    font-size: 0.8em;
    white-space: pre;
  }
}

.box {
  width: 100px;
  height: 100px;
  padding: 1em;
  box-shadow: 2px 2px 6px black;
  transform: rotate(3deg);
  text-align: center;
}

.wrapper {
  width: 65%;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
}

.selected {
  box-shadow: 0px 0px 6px red;
}

JavaScript 1.7

// Note: Natural order not considered but that's OK if you are looking
  //       for a pop over / toast like message.
  //

function convertToNumber(value) {
  const asNumber = parseInt(value);
  return Number.isNaN(asNumber) ? 0 : asNumber;
}

function getNodeZIndex(node) {
  const computedIndex = convertToNumber(window.getComputedStyle(node).zIndex);
  const styleIndex = convertToNumber(node.style.zIndex);

  if (computedIndex > styleIndex) {
    return computedIndex;
  }

  return styleIndex;
}

function getMaxZIndex(selector) {
  const s = selector || 'body *';
  const nodeList = document.querySelectorAll(s);
  const zIndexes = Array.from(nodeList).map(getNodeZIndex);
  return Math.max(...zIndexes);
}

/*
  Add a document ready event so we're adding a border around the div with the
  highest z-index (just as a demo of the getMaxZIndex function)
  */
document.addEventListener("DOMContentLoaded", () => {
  const highest = getMaxZIndex();
  console.log(highest);

  let $el = document.querySelector(`.z-${highest}`);
  if (!$el) {
    // needed if directly styled box got highest value
    $el = Array.from(document.querySelectorAll('body *')).filter(e => getNodeZIndex(e) === highest)[0];
  }
  $el.classList.add("selected");
  $el.title = `Highest z-index = ${highest}`;
});

// Tests ------------------------------------------------------
mocha.setup('bdd');
const expect = chai.expect;

describe("Z-index", () => {
  const MAX_32BIT_INT = Math.pow(2, 31) - 1; // max. z-index value
  const MIN_32BIT_INT = -MAX_32BIT_INT;

  let actual;

  const initElements = (zIndices) => {
    const nodeList = document.createDocumentFragment();
    zIndices.forEach(z => {
      const el = document.createElement('div');
      el.textContent = z;
      el.style = `height: 20px; border: 1px solid black; z-index: ${z}`;
      nodeList.appendChild(el);
    });

    document.getElementById("mockDiv").innerHTML = "";
    document.getElementById("mockDiv").appendChild(nodeList);
  }

 ...