Question

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

具体问题是“位置：相对”元素最终使我的一些链接浮动到右边，无法点击。我已经创建了一个简单的测试页面，我希望能用语言更好地解释这个：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是正确的，因为position: relative项上的.content给了他们一个z索引，这意味着他们已经“浮动”了你的链接的“顶部”在右边。

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

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

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

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

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

3 个答案: