Html 即使在 Firefox 和 IE 中，使用 z-index 的链接也无法点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7245896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Link using z-index can't be clicked even though it's on top, in both Firefox & IE
提问by Alex
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-imageproperty)
我试图让一个文本链接出现在部分透明的图像之上，而该图像又位于纯色背景之上。我希望在打印页面时打印链接文本和图像，而不是彩色背景。（这就是我不使用background-image属性的原因）
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.
至少在以下浏览器中会发生这种情况：Firefox 6.0 (Windows + Linux)、Firefox 3.6 (Windows) 和 Internet Explorer 7。
Please would somebody tell me if this is a problem with my HTML/CSS, or with the browsers?
请有人告诉我这是我的 HTML/CSS 还是浏览器的问题？
Here is some HTML to demonstrate the problem:
下面是一些 HTML 来演示这个问题：
<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
亚历克斯
回答by shanethehat
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:relativeto the link to get the expected behaviour, because without explicit positioning z-index will not do anything.
该问题主要是使用负 z-index 值引起的，这似乎使父 div 捕获鼠标事件。使用正索引，并分配position:relative给链接以获得预期的行为，因为没有显式定位 z-index 不会做任何事情。
回答by The Red Pea
In my case I was dealing with some unexplained pointer-eventsin CSS (specifically the value all), which caused some elements to catch events apparently triggered from a different (non-ancestor!) part of the DOM.
就我而言，我正在处理CSS 中一些无法解释的指针事件（特别是 value all），这导致某些元素捕获显然是从 DOM 的不同（非祖先！）部分触发的事件。
I removed all pointer-eventsfrom the CSS.
我pointer-events从 CSS 中删除了所有内容。
I know this question already has an accepted answer, but my symptoms match the OP, so maybe my tip might help a future struggler like me.
我知道这个问题已经有一个公认的答案，但我的症状与 OP 相符，所以也许我的提示可能会帮助像我这样的未来奋斗者。
回答by jjmontes
Two notes:
两个注意事项：
1) The z-index attribute can only be used on positioned elements (absolute, relative or fixed). Your element is not.
1) z-index 属性只能用于定位元素（绝对、相对或固定）。你的元素不是。
2) [Edited: Not related]Your top element (the with z-index: 0) is located inside your background element (the with z-index: -2).
2）[编辑：不相关]您的顶部元素（z-index：0）位于背景元素内（z-index：-2）。
The following works, you can play with it at: http://jsfiddle.net/5MpFn/
以下作品，你可以玩它：http: //jsfiddle.net/5MpFn/
<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" />
</div>
<div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
<a href="#" style="color:#fff;">Can you click me?</a>
</div>
</body>
</html>
回答by connect2Coder
None of the above solution worked for my specific problem. I would recommend using above solutions first and if that does not work set pointer events to none (does not work for IE<=10).
上述解决方案均不适用于我的特定问题。我建议首先使用上述解决方案，如果这不起作用，请将指针事件设置为无（不适用于 IE<=10）。
.some-horizontal-container {
pointer-events: none;
}
You can also use visibility: hiddenfor the div that overlays the clickable element under it.
您还可以visibility: hidden用于覆盖其下可点击元素的 div。
Please check out this article for more details:https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/
请查看这篇文章了解更多详情：https: //blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/
