Link using z-index can't be clicked even though it's on top, in both Firefox & IE
I'm trying to get a text link to appear on top of a partly-transparent image, which in turn is on top of a plain coloured background. I want the link-text and image to print when the page is printed, but not the coloured background. (Which is why I'm not using the background-image property)
The problem is that although the link appears on top of the image, and the image appears on top of the background as desired, the link cannot be clicked. It seems to me that if the link appears on top then it should be susceptible to mouse events...
This happens in at least the following browsers: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) and Internet Explorer 7.
Please would somebody tell me if this is a problem with my HTML/CSS, or with the browsers?
Here is some HTML to demonstrate the problem:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="position: relative;z-index: -2; background-color:#333; height:200px;">
<img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />
<a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>
</div>
</body>
</html>
Cheers!
Alex
Answer
The issue is mainly caused using negative z-index values, which seems to be making the parent div capture the mouse events. Use positive indexes, and assign position:relative to the link to get the expected behaviour, because without explicit positioning z-index will not do anything.