Link 负 z-index 在 IE 中不可点击

Question

谁能告诉我为什么灰色框中的 link 在 Internet Explorer 中不可点击（我使用的是版本 11）。

我在任何其他浏览器中测试它，它工作正常。

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

link 由于 z-index 而无法点击。实际上，您将 div 设置在 body 后面。您还必须指定 body 的 z-index。或者至少将其设置为正值，使其位于 body 之前，如果您希望将其他元素显示在灰色 div 之前，则将其设置得更高。这就是为什么你不能点击它。显然，当您像这样设置 z-index 时，Firefox 和 co 可以毫无问题地识别 link。

这可能有助于您了解如何在 IE 中使用 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，但是如果您打算在灰色 div 后面显示一些东西，您可能需要它。

Answer 2

link 不可点击，因为 IE 将其置于正文后面。如果您注意到，甚至 link 的文本也是不可选择的。尝试将 z-index: 1 设置为 body 或任何 parent 容器。这样你首先告诉浏览器将容器内的所有元素带到更高的 z-index 然后将 link 移到那组元素后面（但是 link 的移动仅在 parent 的上下文中完成，即升高的级别。阅读 stacking context）。因此 link 现在可以点击了。

备用解决方案 如果你只想要黄色 div 而不是灰色 div，那么只给黄色 div 正值 z-index。从灰色div中去掉z-index属性。如果没有 z-index 值，则默认为 0。它将永远留在黄色div.

后面

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

Link 负 z-index 在 IE 中不可点击

Link with negative z-index not clickable in IE

html

css

internet-explorer

z-index