IE11では負のZ-インデックスのリンクをクリックできませんが、Chrome、Firefox、Edgeでは動作しますか？

Question

私はメニューとdivのコンテンツを持っています。このコンテンツはメニューの一部になります。

問題はメニューのリンクです。IE 11では動作しません（クリックできません）。

ここで問題は何ですか？

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 1

あなたはこのような0よりZインデックス大きいを持つ親のdivにあなたの2つのdiv要素を追加しようとしました：

#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>