user3870112 user3870112 - 4 months ago 14
HTML Question

How to make a link beneath a div clickable

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

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>