使用z-index的链接无法点击,即使它位于Firefox和IE的顶部

Question

使用z-index的链接无法点击,即使它位于Firefox和IE的顶部

我试图让一个文本链接显示在部分透明的图像上,而这个图像又位于纯色背景的顶部.我希望在打印页面时打印链接文本和图像,而不是彩色背景.(这就是为什么我没有使用background-image属性)

问题是虽然链接显示在图像的顶部,并且图像根据需要显示在背景的顶部,但无法单击链接.在我看来,如果链接出现在顶部,那么它应该容易受到鼠标事件的影响......

这种情况至少发生在以下浏览器中:Firefox 6.0(Windows + Linux),Firefox 3.6(Windows)和Internet Explorer 7.

如果这是我的HTML/CSS或浏览器的问题,请有人告诉我吗？

这里有一些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>

Run Code Online (Sandbox Code Playgroud)

干杯!

亚历克斯

Answer 1

sha*_*hat 56

问题主要是使用负z-index值引起的,这似乎是使父div捕获鼠标事件.使用正索引,并分配position:relative给链接以获得预期的行为,因为没有显式定位,z-index将不会执行任何操作.

只是将z-index值更改为正值并不能解决问题.位置:亲属是强制性的. (3认同)
是的,正如下面的@jjmontes所说,你必须明确地将定位设置为绝对,相对或固定才能使用z-index.我没有提到的一点. (2认同)
对于读这个的人来说,不确定这是你正在寻找的答案,它是!您不需要为<a>链接声明一个顶部/左侧位置,只需将其设置为"position:relative;" 它会起作用.我读了这个答案,解雇了它,在它上面工作了将近一个小时,最终尝试了这个并且它有效! (2认同)

Answer 2

The*_*Pea 6

在我的情况下,我正在处理CSS中的一些无法解释的指针事件(特别是值all),这导致一些元素捕获显然是从DOM的不同(非祖先!)部分触发的事件.

我pointer-events从CSS中删除了所有内容.

我知道这个问题已经有了一个公认的答案,但我的症状与OP相符,所以也许我的提示可能会帮助像我这样的未来挣扎.

Answer 3

con*_*der 5

上述解决方案均不适用于我的特定问题。我建议首先使用上述解决方案，如果这不起作用，请将指针事件设置为无（不适用于 IE<=10）。

.some-horizontal-container {
  pointer-events: none;
}

Run Code Online (Sandbox Code Playgroud)

您还可以visibility: hidden用于覆盖其下可点击元素的 div。

请查看这篇文章了解更多详情：https : //blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

归档时间：	14 年，5 月前
查看次数：	46082 次
最近记录：	7 年，4 月前