位置：相对导致锚点不可点击

Question

我正在摆弄我正在开发的一个网站，试图修复一些奇怪的 IE7 错误，因为这是一个内部项目，而 IE7 是标准浏览器。我最终添加了“position:relative”来纠正几个特定于 IE 的布局问题，但我似乎在 FF/Chrome 中让事情变得更糟（我认为自己更像是一名系统程序员，但我目前的职责涉及更多的网络不幸的是，焦点）。

具体问题是“position：relative”元素最终使我的一些链接浮动到右侧，无法单击。我创建了一个简单的测试页面，我希望它能比我用文字更好地解释这一点： http://jsfiddle.net/gBchZ/。

我最终会解决这个混乱，但我希望有人能解释我的链接隐藏在位置后面的原因：相对元素。

Answer 1

如果没有该网站的链接，很难准确判断出了什么问题。但无论如何，解决方案可能是使用 z-index 作为 a 的父级。例如z-index:100。请记住，z-index 仅适用于定位元素，因此您可以使用 position:relative。

基于您的示例的演示： http://jsfiddle.net/gBchZ/3/

Answer 2

这是因为 .content div 覆盖了右框（在您的演示中）。如果您向这些 div 添加 margin-right ，则 a 变为“可访问：”

.content
{
    position: relative;
    margin-right: 20%;
}

JS Fiddle demo

您还可以使用 position:absolute; 使 a 元素在 中显示“更高” z-index，尽管这变得相当复杂：

#rightBox
{
    background-color: green;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    margin: -20px .5em .5em .5em;
    padding: .5em;
}

JS Fiddle demo

Answer 3

@David 是正确的，.content 项上的 >position:relative 为它们提供了 z 索引，这意味着它们位于您浮动到右侧的链接的“顶部”。

我认为更好的解决方案是将 position:relative; 添加到您向右浮动的链接，并为其指定高于 .content 的 z-index：

#rightBox
{
    ...
    position: relative;
    z-index: 2;
}

.content
{
    position: relative;
    z-index: 1;
}

请参阅http://jsfiddle.net/gBchZ/6/