如何使 link 在 div 下方可点击

Question

我在 div 下有一个 link，固定位置的高度和宽度为 100%，z-index：5。我需要将此 div 保持在我的 link 之上，但 link 不起作用。我可以使 link 正常工作但将此 div 保持在我的 link 之上吗？

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5
}

a {
  font-size:50px;
  z-index:0
}

<a href="http://google.com"> My link</a>

<div></div>

Answer 1

您可以将 pointer-events:none; 添加到您的 div

的 CSS 规则中

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5;
  pointer-events:none;
}

a {
  font-size:50px;
  z-index:0;
}

<a href="http://google.com"> My link</a>

<div></div>

Answer 2

如果这个 div 的目的只是为了改变背景颜色，删除它并改为这样做会更容易：

body{
    background-color:lightgrey;
}

如何使 link 在 div 下方可点击

How to make a link beneath a div clickable

html

css

z-index

hyperlink