How to make a link beneath a div clickable

Question

I have a link under a div with 100% height and width in a fixed position and z-index: 5. I need to keep this div above my link, but the link doesn't work. Can I make the link work but keep this div above my link?

https://jsfiddle.net/8hu90e9x/1/

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

You could add pointer-events:none; to the CSS rules for your div

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>