使用z-index的链接不能被点击，即使它在顶部，在Firefox& IE [英] Link using z-index can't be clicked even though it's on top, in both Firefox & IE
问题描述
我想要获得一个文本链接出现在部分透明的图像的顶部，而图像反过来位于纯色背景的顶部。我想要在打印页面时打印链接文本和图像，而不是彩色背景。 （这就是为什么我不使用 background-image 属性）
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...
这至少发生在以下浏览器： Firefox 6.0（Windows + Linux），Firefox 3.6（Windows）和Internet Explorer 7。
This happens in at least the following browsers: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) and Internet Explorer 7.
请有人告诉我这是否是我的HTML / CSS的问题，与浏览器？
Please would somebody tell me if this is a problem with my HTML/CSS, or with the browsers?
以下是一些HTML演示问题：
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>
干杯！
Alex
推荐答案
问题主要是使用负z-index值，这似乎使父div捕获鼠标事件。使用正索引，并将 position：relative 分配给链接以获得预期的行为，因为没有显式定位z-index将不会做任何事情。
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.
这篇关于使用z-index的链接不能被点击，即使它在顶部，在Firefox& IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
