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>

You cannot do it, but you can set your `a` with `display: block;` and use it as a `div`. — AntoineB, Aug 01 '16 at 15:04
http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements — Dryden Long, Aug 01 '16 at 15:06

score 6 · Accepted Answer · answered Aug 01 '16 at 15:04

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>

score 0 · Answer 2 · answered Aug 01 '16 at 15:10

0

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;
}

answered Aug 01 '16 at 15:10

How to make a link beneath a div clickable

2 Answers2