JSFiddle - React, Tailwind, and code Playground
HTML
<div class="below">Below</div>
<div class="above">Above</div>
CSS
.below {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background-color: green;
color: white;
padding: 3px;
}
.above {
position: absolute;
top: 20px;
left: 20px;
width: 140px;
height: 140px;
background-color: rgba(0, 0, 255, 0.75);
padding: 3px;
}
JavaScript
$(".above").click(function(e) {
$(this).hide(0);
var below = $(document.elementFromPoint(e.clientX, e.clientY));
// Trigger a click on the underlying element asap, but not right away.
setTimeout(function() {
below.trigger("click");
});
$(this).show(0);
});
$(".below").click(function() { alert("Below clicked!"); });