Html 位置：相对导致锚不可锁定

我在开发一个网站，试图修复一些奇怪的IE7错误，因为这是一个内部项目，IE7是标准浏览器。我最后添加了“位置：相对”来纠正一对IE特定的布局问题，但我似乎在FF/Chrome中使事情变得更糟（我认为自己更像是一个系统程序员，但我目前的职责涉及更多的Web焦点不幸）。 具体的问题是，“position:relative”元素最终使我的一些链接无法链接，这些链接被向右浮动。我已经创建了一个简单的测试页面，我希望它能比我的文字更好地解释这一点：

---

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

这是因为

.content

div

覆盖了正确的框（在您的演示中）。如果在这些div中添加一个

margin right

，则

a

将变为“可访问：”

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

您还可以使用

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;
}

---

如果没有该站点的链接，很难准确判断出问题所在。但在任何情况下，解决方案都可以是对

a

的父项使用

z-index

。例如

z-index:100

。请记住，

z-index

仅适用于定位元素，因此可以使用

position:relative

基于您的示例的演示：

是正确的，因为

上的
位置：relative
。content

项为它们提供了一个z索引，这意味着它们位于您浮动到右侧的链接的“顶部”

我认为一个更好的解决方案是添加

位置：relative

指向您右侧浮动的链接，并为其指定一个高于

的z索引。content

：

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

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

---

请参见

+1，以提醒z索引仅适用于定位元素。