JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="B" class="box">B</div>
    <div id="A" class="box">A</div>
</div>

CSS

#outer {
  position: relative;
}

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

#A {
  border-color: #385D8A;
  background: #4F81BD;
}

#B {
  border-color: #8C3836;
  background: #C0504D;
  top: 75px;
  left: 75px;
}

JavaScript

var $A = $('#A'), $B = $('#B');

var elementsFromPoint = function (x, y, root) {
  var buffer = [], result = [], el, i = 0, lim;
  
  while ((el = document.elementFromPoint(x, y)) && [root, document.body, document.body.parentNode].indexOf(el) < 0) {
    result.push(el);
    buffer.push({el: el, visibility: el.style.visibility});
    el.style.visibility = 'hidden';
  }

  for (lim = buffer.length; i < lim; i += 1) {
    buffer[i].el.style.visibility = buffer[i].visibility;
  }
  
  return result;
};

$B.on('click', function () {
  console.log('B clicked');   
});


$('#outer').on('click', function (evt) {
    var elements = elementsFromPoint(
        evt.pageX + $(this).offset().left,
        evt.pageY + $(this).offset().top,
        this
    );

    console.log(elements);
});