Link with negative z-index not clickable in IE

Question

Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11).

http://jsfiddle.net/rk7n7xjj/1/

I tested it in any other browsers and it works fine.

HTML

<div class="gray"><a href="#bla">This link is not clickable in IE</a></div>
<div class="yellow">Some placeholder text</div>

CSS

.gray {
position:fixed;
z-index:-1;
top:100px;
background:gray;
height:50px;
width:200px;
}

.yellow {
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}

Answer 1

The link is not clickable becaue of the z-index. Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it. Obviously Firefox and co has no problems to identify the link when you set z-index like this.

This may helps you to understand how you can use z-index also in IE.

In your case, to get what you want, your CSS should look like:

.gray {
    position:fixed;
    z-index: 1;
    top:100px;
    background:gray;
    height:50px;
    width:200px;
}

.yellow {
    position:relative;
    z-index: 2;
    margin:0 auto;
    background:yellow;
    height:1000px;
    margin-top:400px;
}

Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.

Answer 2

The link is not clickable because IE is taking it behind the body. If you notice, even the text of the link is not selectable. Try setting a z-index: 1 to the body or any parent container. That ways you are first telling the browser to take all the elements inside the container to a higher z-index and then move the link behind that raised set of elements (But the movement of the link is done only within the parent's context i.e. the raised level. Read about stacking context). Thus the link now becomes clickable.

Alternate Solution If you just want the yellow div over the gray div, then give a positive z-index to the yellow div only. Remove the z-index property from the gray div. If no z-index value is present, 0 is taken as the default. It will always stay behind the yellow div.

.yellow {
     position: relative;
     z-index: 1;
     /* other styles */
 }