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> 

Answer 2

If the purpose of this div is just to change the background color, it would be easier to delete it and do this instead:

body{
    background-color:lightgrey;
}