position: relative 导致锚点不可点击答案

【问题标题】：position: relative causes anchors to be unclickableposition: relative 导致锚点不可点击
【发布时间】：2011-03-09 00:29:26
【问题描述】：

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

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

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

【问题讨论】：

标签： html css layout css-position

【解决方案1】：

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

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

【讨论】：

+1 用于提醒 z-index 仅适用于定位元素。

【解决方案2】：

这是因为.contentdivs 覆盖了右框（在您的演示中）。如果您将margin-right 添加到这些 div 中，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

【讨论】：

【解决方案3】：

@David 的正确之处在于 .content 项目上的 position: relative 为它们提供了 z-index，这意味着它们位于您浮动到右侧的链接的“顶部”。

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

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

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

见http://jsfiddle.net/gBchZ/6/

【讨论】：