1

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>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
RGS
  • 4,062
  • 4
  • 31
  • 67
  • 1
    Is http://stackoverflow.com/questions/12517158/z-index-in-internet-explorer-not-working relevant? It's a bit old and latest IE may have fixed this? – Martin Sep 01 '16 at 17:59

1 Answers1

2

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>
Sylvain B
  • 550
  • 3
  • 9
  • oh, it works on IE here! I'll try to change my css now. thank you! – RGS Sep 01 '16 at 18:09
  • 1
    You may want to add an explanation around the fact that IE sets the default `z-index` to `0` and thus the `#menu` element was essentially "behind" the document. – Heretic Monkey Sep 01 '16 at 18:11
  • is it a good solution too? `html{ z-index:10; width:100%; position:relative; }` – RGS Sep 01 '16 at 19:04