Here is my issue--I need to somehow access the onclick of an item that is covered by another element of higher z-index. I know this is going against the point of z-index, but any ideas?
In the below example, only the small top-sliver of the red box is clickable. I have a webpage design where tabs that need to be clickable are overlaid by an artsy bar... I'd love if there were a way (maybe some javascript trick?) to use onclick for these obscured, lower z-index elements without changing any positioning, though my gut feeling isn't good.
<html>
<head>
<style type="text/css">
#bg {
position:absolute;
width:500px;
height:500px;
background:pink;
}
#under {
cursor:pointer;
margin-top:-10px;
background:red;
width:50px;
height:50px;
z-index:0;
}
#over {
position:absolute;
width:900px;
height:50px;
margin-top:10px;
z-index:100;
}
</style>
</head>
<body>
<div id="bg">
<div id="under" onclick="alert('hi');">aaa</div>
</div>
<div id="over"></div>
</body>