使用 z-index 的链接在 Firefox 和 Windows 中都无法单击，即使它位于顶部。 IE

发布于 2024-12-02 06:49:13 字数 1113 浏览 1 评论 0原文

我试图让文本链接出现在部分透明图像的顶部，而该图像又位于纯色背景的顶部。我希望在打印页面时打印链接文本和图像，但不打印彩色背景。（这就是为什么我不使用 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>

干杯!

亚历克斯

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南风几经秋 2024-12-09 06:49:13

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

回复收藏 0 原文

稍尽春風 2024-12-09 06:49:13

就我而言，我正在处理一些无法解释的指针事件在CSS中（特别是值all），这导致一些元素捕获显然是从DOM的不同（非祖先！）部分触发的事件。

我从 CSS 中删除了所有pointer-events。

我知道这个问题已经有一个公认的答案，但我的症状与OP相符，所以也许我的建议可能会帮助像我这样的未来奋斗者。

回复收藏 0 原文

坏尐絯 2024-12-09 06:49:13

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

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

您还可以对 div 使用 visibility:hidden 来覆盖其下方的可点击元素。

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

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).

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

You can also use visibility: hidden for the div that overlays the clickable element under it.

Please check out this article for more details:https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

回复收藏 0 原文

时光清浅 2024-12-09 06:49:13

两个注意事项：

1) z-index 属性只能用于定位元素（绝对、相对或固定）。你的元素不是。

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>

Two notes:

1) The z-index attribute can only be used on positioned elements (absolute, relative or fixed). Your element is not.

2) [Edited: Not related] Your top element (the with z-index: 0) is located inside your background element (the with z-index: -2).

The following works, you can play with it at: 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>

回复收藏 0 原文

~没有更多了~