JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block bottom">BOTTOM</div>
<div class="block middle">MIDDLE</div>
<div class="block top">TOP</div>

<div class="form">
  x: <input name="x" size="5" value="60"> 
  y: <input name="y" size="5" value="60"> 
  <button>Get Element</button>
    
  <div class="results"></div>

</div>

CSS

.block {
    display: block;
    width: 100px;
    height: 100px;
    
    position: absolute;
    top: 0;
    left: 0;
}

.bottom { background: red; }
.middle { background: green; top: 20px; left: 20px; }
.top    { background: blue; top: 40px; left: 40px; }

.top, .middle { pointer-events: none; }

.form { margin-top: 160px; padding: 10px; }

JavaScript

$('button').click(function(){
  
  var x = parseInt( $('input[name=x]').val() );
  var y = parseInt( $('input[name=y]').val() );
  document.querySelectorAll('*').forEach(element => element.style.setProperty('pointer-events', 'auto', 'important'));
  var elem = document.elementFromPoint(x,y);
  $('.results').text(elem.textContent);
  
});