Rick Joe Rick Joe - 3 months ago 14
CSS Question

Can't click link with negative z-index on IE11 but works on Chrome, Firefox, Edge?

I have a menu and a div content. this content gets part of the menu.

The problem is the link in menu, it is not working on IE 11 (can't click).

What is the problem here?

https://jsfiddle.net/x45j1may/



#menu {
position: absolute;
background: red;
width: 100%;
height: 200px;
top: 0;
z-index: -1;
}
#content {
margin-top: 100px;
background: #fff;
width: 90%;
margin: 150px auto;
height: 200px;
}

<div id=menu><a href='#'>LINK (CANT CLICK IE 11)</a>
</div>
<div id=content></div>




Answer

Have you tried to add your 2 divs in a parent div that has a z-index greater than 0. Like this :

#container {
  position:relative;
  z-index:10;
  width:100%;
  height:400px;
  border:1px solid #333;
}
#menu{
  position:absolute;
  background:red;
  width:100%;
  height:200px;
  top:0;
  z-index:-1;
}
#content{
  margin-top:100px;
  background:#fff;
  width:90%;
  margin:150px auto;
  height:200px;
}
<div id="container">
  <div id=menu><a href='#'>LINK (CANT CLICK IE 11)</a></div>
  <div id=content></div>
</div>