CSS 问题：当其他元素位于“绝对”位置时，页面上的链接变得不可点击。

Question

这是一个较长的故事，我想简短地讲一下。一般来说，我正在使用一个网站菜单，该菜单应该在部分透明的背景 gif 图像下部分滑动，并且仅在鼠标悬停时完全显示自己。为此，我在背景图像和菜单上使用 z-index 参数。但由于你不能在身体背景图像上使用 z-index，所以我使用“常规”图像，将其设置为 100% 宽度和高度 - 并且为了使 z-index 参数正常工作，我需要也指定“位置”。看起来，通过这个组合，我基本上创建了一个隐形的盾牌，使所有链接都无法触及。我将其简化为以下几行：

<style>
#style {
    position: absolute;
    width:100%;
    height:100%;
}
</style>

<div id="style"></div>
<a href="">test</a>

如果您尝试这样做，您将看到“测试”链接不可点击（跨浏览器）。

有谁知道我该如何解决这个问题？谢谢！

Answer 1

<style>
#style {
    background-color:#ccc;
    position: absolute;
    width:100%;
    height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>



<div id="style"></div>
<a href="#">test</a>

Answer 2

<style>
#style {
    position: absolute;
    width:100%;
    height:100%;
    z-index: -1;
}

.test {
    z-index: 99;
}
</style>

<div id="style"></div>
<a href="" class="test">test</a>

也将与campino2k的答案一起工作。

Answer 3

感谢您的回复，它们为我指明了正确的方向。看起来 div 确实创建了一个隐形的防护罩，并且当涉及到底层链接时，该防护罩（或多或少）是无法穿透的。

点击 DIV 到底层元素

@Logan：恐怕这种方法对我不起作用。您建议简单地将链接提升到 div 盾牌上方 - 然而，这违背了我上面描述的最初目的（带有背景图像和在其下方滑动的菜单的目的）。

@campino：我认为就是这样，但是向“样式”添加 z-index 定义再次破坏了它。您为整个 div 字段着色的事实帮助我理解了您显然已经知道的内容：只要 div 位于链接上方，它就不可点击，句号。

总而言之，我的结论是我的方法行不通。对于实际项目，我可能会将不对称背景图像分割成几块，因此 div 不会覆盖整个屏幕，而仅出现在我绝对需要它的地方。

Answer 4

我认为设置 z-index 虽然可能有效，但并不能真正解决问题，而是一种可以实现您想要的效果的 hack。

无法点击链接的根本原因主要是元素通过浮动、显示或位置属性定位不当。此元素显示在链接的前景中，创建一个阻止您单击该链接的防护罩。

我发现的解决方案是使用 javascript/jquery 到 console.log 或 alert id 或 <单击时前台元素的 code>class 。

$('*').click(function (){
   alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id')); 
});

上面将提醒前景中的元素。现在你知道了原因，看看它的风格。