链接负z-index在IE中无法点击

Question

任何人都可以给我一个提示，为什么灰色框中的链接在Internet Explorer中无法点击（我使用的是版本11）。

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

我在其他任何浏览器中测试过，它运行正常。

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

由于z-index，链接无法点击。 实际上你在div后面设置了body。您也必须指定z-index的{​​{1}}。或者至少将它设置为正位置，使其位于body前面并将其他元素设置得更高，如果你将它们显示在灰色body前面。这就是为什么你不能点击它。 很明显，当你像这样设置div时，Firefox和co没有问题来识别链接。

这可以帮助您了解如何在IE中使用z-index。

在您的情况下，要获得您想要的内容，您的z-index应如下所示：

CSS

实际上你不需要灰色的.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; } ，但如果你打算在灰色z-index后面显示一些你可能需要的东西。

Answer 2

该链接无法点击，因为IE将其置于正文后面。如果您注意到，即使链接的文本也不可选。尝试将z-index: 1设置为body或任何父容器。这样你就可以首先告诉浏览器将容器中的所有元素都带到更高的z-index，然后将链接移动到那个提升的元素集合后面（但链接的移动只在父元素中完成）上下文即提升的水平。阅读stacking context）。因此，链接现在变得可点击。

替代解决方案 如果你只想在灰色div上使用黄色div，那么只给黄色div一个正z-index。从灰色div中删除z-index属性。如果不存在z-index值，则将0视为默认值。它将永远留在黄色div。

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