overlapping div is covering image and make it unclickable
Question
I have a div that is absolutely positioned so I can place it overlapping an image. the problem is that the empty part of the div is making the image beneath it unclickable. in IE the image is still clickable but in FF or chrome its not/
3 answers
solution1
1 2010-05-01 15:26:03
Add position: relative; to the image. Here's an SSCCE , copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2750416</title>
<style>
#overlap {
position: absolute;
width: 100%;
height: 61px;
background: pink;
}
img {
position: relative; /* Without it, the image disappears "behind" div */
float: right;
}
</style>
</head>
<body>
<div id="overlap">Overlap</div>
<img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
</body>
</html>
solution2
0 2013-07-24 18:35:08
You can use the CSS4 experimental feature pointer-events:none on your absolute element. Problem with this feature is that it doesn't work in all browsers, only firefox and chrome as far as i know. Just sharing a bit of information :)
solution3
0 2010-05-01 15:12:38
You can't fix this through CSS alone. The easiest way is to set the div onclick event to the same function as your image onclick.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.