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

document.getElementById("container-content").onclick=function(){
  alert("This doesn't work.");
}