Onclick usage for low z-index elements
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 th开发者_如何学Pythonese 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>
I would do it with a transparent PNG inside a DIV above the artsy bar with the same dimensions as your clickable lowest z-index DIV.
Be aware of Internet Explorer Issues.
I used the technique many times.
The usual replacement method is to place the "over" elements (positioned absolutely) inside the "under" elements (positioned either relatively or absolutely) and make the content the same size (Gilder/Levin Image Replacement).
加载中,请稍侯......
精彩评论