logo标签列表

使用z-index连接无法在Firefox和IE中点击，尽管它在顶部。

htmlcssz-index
33

我想在部分透明的图片上方显示文本链接，而图片又位于纯色背景之上。我希望在打印页面时可以打印链接文本和图片，但不包括背景颜色。（因此我没有使用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>

祝福！

Alex

请注意，您可以为每个媒体（打印机、屏幕）使用不同的CSS，因此您可以仅使用不同的图像而不是依赖于浏览器删除纯色背景？ - jjmontes
感谢您的评论。不太确定我理解了。如果不使用background-image（无法打印），仅通过指定不同的CSS样式表，就不可能为<img>指定不同的'src'属性吗？此外，需要在HTML中指定图像，因为它将由非技术人员使用WYSIWYG编辑器添加。 - Alex
4个回答
62

这个问题主要是由于使用负的z-index值导致的，这会使得父级div捕获鼠标事件。使用正的索引，并给链接分配position:relative可以获得预期的行为，因为没有明确的定位时z-index不会有任何效果。

3
仅仅将z-index的值更改为正数并不能解决问题。不过，设置position:relative是必要的。 - jjmontes
1
谢谢，问题解决了！我已经尝试过正值的z-index值，但是链接上的position:relative才是关键所在。（否则链接会出现在图片后面。） - Alex
2
是的，正如@jjmontes在下面所说的那样，您必须明确设置位置为absolute、relative或fixed才能使用z-index。这是我没有提到的一个要点。 - shanethehat
2
如果你正在阅读这篇文章，但不确定这是否是你要找的答案，那么它就是！你不需要为<a>链接声明一个top/left位置，只需将其设置为"position:relative;"即可。我曾经看过这个答案，但并没有采纳，花了将近一个小时的时间去尝试其他方法，最终尝试了这个方法，结果成功了！ - BillyNair
1
关键点是父div捕获鼠标事件。不要试图将z-index应用于子元素。 - NoelProf
显示剩余4条评论
6
在我的情况下，我正在处理CSS中一些未解释的pointer-events（具体来说是值all），这导致某些元素捕获了明显来自DOM的不同（非祖先！）部分触发的事件。
我从CSS中删除了所有pointer-events。
我知道这个问题已经有一个被接受的答案，但我的症状与OP相匹配，所以也许我的提示可以帮助像我这样的未来的挣扎者。
5

以上任何解决方案都无法解决我的特定问题。我建议首先使用上述解决方案，如果不起作用，将指针事件设置为none（对于IE<=10无效）。

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

您还可以使用visibility: hidden来隐藏覆盖在其下可点击元素上方的

4

两点注意：

1）z-index属性只能用于已定位的元素（absolute、relative或fixed）。您的元素不是这些类型之一。

2）[编辑：无关] 您的顶部元素（具有z-index：0的元素）位于背景元素（具有z-index：-2的元素）内部。

以下代码可行，您可以在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>
非常感谢您查看这个问题！非常感激。我很好奇，为什么子元素的z-index与其父元素不同会有什么问题？也就是说，为什么您将<a>从<div background-color #333>中删除了呢？ - Alex
抱歉，那与您的问题无关。我唯一建议不这样做的原因是该模型会使<a>元素上的事件以“不自然”的顺序冒泡（与屏幕上显示的顺序不同）。 - jjmontes
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接