最高 Z-index 但无法点击图像 href

Question

我正在创建这个网站： https://www.melkerhei.be/smeltkroes/index.html

左上角的标志应该是可以点击的。这是代码：

  <header>
    <div class="header">
      <div class="logo_box_top" style="z-index:20">
                 <a href="index.html" style="z-index:20">
                          <img src="assets/img/logo.png" alt="Smeltkroes">
                  </a>
      </div>
    </div>
  </header>

也许中间的导航栏挡住了路。我通过更改元素的位置和 z-index'es 进行了很多尝试，但没有任何效果。我该如何解决？

Answer 1

Z-index 不能做任何事情，因为没有位置，Z-index 总是与位置一起工作，例如：

logo_box_top { 
  z-index: 20;
  position: static;
}

您可以使用相对、绝对等

Answer 2

在 .header class 上使用 pointer-events: none，所有 children 也将默认禁用指针事件。

pointer-events: none; 的文档指出：

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

如果您有特定原因可以保留此设置，如果您希望它们可点击，则可以在 children 上设置一个明确的指针事件值。不过您可能不需要它，可以将其删除。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

编辑

根据您的意见，这是您的解决方案：

将 pointer-events: none; 留在 .header class 上。
将 pointer-events: all; 添加到 header 内的定位元素。

然后您仍然可以单击 header link 而不会影响其他图层。

最高 Z-index 但无法点击图像 href

highest Z-index but can't click image href

html

css

z-index

编辑