Can someone tell me why my links aren't clickable when I have a div under it?

Question

I am making a widget for my site that displays the author and their social links. It worked fine until I added the blurry background div in the mix. Something about it is not letting me click the links any more. I've tried adding z-index values, but that doesn't seem to help. Check out my fiddle to see my problem. Below is the class in question...

.social_artist_image_wrapper {
    position:absolute;
    height:126px;
    width:580px;
    background-size:cover;
    opacity:0.3;

    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);  
}

Answer 1

Because element with position:absolute (or anything other than static are placed on top of position:static elements, unless they have a negative z-index .

Try putting position:relative on your inner area, plus a semi-transparent background colour: demo

Answer 2

I think it is because your div is not under it, it is on TOP of it. This is because you are using position: absolute . You probably can achieve what you are looking for with position:relative .

Answer 3

Change your CSS to have this:

.social_artist_text_wrapper a {
    color:#bbb;
    text-shadow:0px 0px 5px #000;   
    position: relative;
    z-index: 2;
}

As others have said, it is because you absolutely positioned the background image. So in order to get the other elements to render in front of it you need to set the z-index property, which only works if the position property is something other than static .

Updated fiddle .

Answer 4

Add this style to the ".social_artist_image_wrapper" class

pointer-events:none;

Lacks IE support so the positioning answers above may be better suited to your needs (unless you don't need to support IE8 or IE9)