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确实创造了一个看不见的盾牌，并且当涉及到底层链接时，该盾牌（或多或少）是无法穿透的。

Click through a DIV to underlying elements

@Logan：我担心这种做法对我不起作用。你建议简单地提高div盾上方的链接 - 然而，这会破坏我上面描述的原始目的（带有背景图像和菜单在其下滑动的那个）。

@campino：我想到就是这样，但是在“样式”中添加z-index定义再次打破了它。你为整个div字段着色的事实帮助我理解了你已经知道的东西：只要div在链接上，它就不是可点击的，句号。

总而言之，我总结说我的方法不起作用。对于实际项目，我可能会将我的不对称背景图像分割成几个部分，因此div不会覆盖整个屏幕，而且只是我绝对需要的地方。

Answer 4

我认为设置一个z-index，尽管它可能有用但并不能真正解决问题，而是一种可以实现你想要的黑客攻击。

不可点击链接的根本原因主要是通过floating, display, or position属性不正确定位的元素。此元素显示在链接的前景中，创建一个屏蔽，阻止您单击链接。

我找到的解决方案是，当您点击时，使用javascript/jquery到console.log或alert前景中元素的id或class

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

上面的

将警告前景中的元素。现在你知道原因了解它的风格。

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

4 个答案: