CSS 问题 : Links on page becoming unclickable when other element is positioned "absolute"

Question

这是一个较长的故事，我想缩短它。一般来说，我正在玩一个网站菜单，该菜单应该在部分透明的背景 gif 图像下部分滑动，并且只有在鼠标悬停时才会完全显示出来。为此，我在背景图像和菜单上都使用了 z-index 参数。但是由于你不能在 body 背景图像上使用 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>