JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-container">
    
    <div id="container-content">You can't highlight me! D:</div>
    
    <div id="container-fixed"><div style="margin:90px auto;background:red;width:40px;height:40px;"></div>You cannot highlight the text behind this DIV.  It also doesn't fire click events.</div>
    
</div>

CSS

#main-container {
width:90%;
margin:5%;
position:relative;
height:500px;
overflow:auto;
}

#container-content {
width:100%;
height:auto;
}

#container-fixed {
width:100%;
height:100%;
position:absolute;
top:0; left:0;
color:red;
}

JavaScript

topo=$('#container-content').offset().top;
left=$('#container-content').offset().left;
right=$('#container-content').offset().left+$('#container-content').width();
bottom=$('#container-content').offset().top+$('#container-content').height();
$(document).click(function(e){
    if(e.pageX>=left && e.pageX<=right && e.pageY>=topo && e.pageY<=bottom){
        alert("This doesn't work.");
    }
});