CODEWITHSUNDEEP
css
RGS
RGS

Reputation: 4253

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>

Upvotes: 1

Views: 901

Answers (1)

Sylvain B
Sylvain B

Reputation: 550

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>

Upvotes: 2

Related Questions