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/ any suggestions?
A:
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.
fearofawhackplanet
2010-05-01 15:12:38
can you write this function?
TomBs
2010-05-01 15:14:32
well what does your image onclick function look like?
fearofawhackplanet
2010-05-01 15:17:08
+1
A:
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>
BalusC
2010-05-01 15:26:03