JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer"></div>

CSS

#outer {
  position: relative;
  
  margin-left: 100px;
  margin-top: 100px;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 2px;
  border: 3px solid #000;
  color: #fff;
  background: #333;
  opacity: 0.5;
}

JavaScript

// create some boxes
for (var i = 0; i < 500; i += 1) {
  $('<div class="box" />').appendTo('#outer').css({
    left: Math.random() * 150,
    top: Math.random() * 150
  });
}

// this function should (did not enough testing) return all elements at a given
// point in the order of top to bottom.
var elementsFromPoint = function (root, x, y) {
  var result = [], i = 0, lim = root.childNodes.length, bb;
  
  for (; i < lim; i += 1) {
    bb = root.childNodes[i].getBoundingClientRect();
    if (bb.left <= x && x <= bb.right && bb.top <= y && y <= bb.bottom) {
      result.push(root.childNodes[i]);
    }
  }

  return result;
};

$('#outer').on('click', function (evt) {
  $.each(elementsFromPoint(this, evt.pageX, evt.pageY), function () {
    $(this).css('outline', '1px dotted #0ff');
  });
});