位置：相对原因锚点是不可点击的

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

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

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

来源

2011-03-08 WorkerThread

没有链接的网站很难确切地说出了什么是错的。但无论如何，解决方案可以使用z-index作为a的父项。例如z-index:100。请记住，z-index仅适用于定位元素，因此您可以使用position:relative。

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

来源

2011-03-08 16:17:54 Sotiris

+1提醒z-index只适用于定位元素。 – Memochipan 2012-12-17 20:57:29

这是因为.contentdiv正在覆盖右边框（在您的演示中）。如果添加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

来源

2011-03-08 16:16:14

@David的修正，关于.content项目position: relative是给他们一个z-index的，这意味着它们是‘上面’的链接的你“我已经漂到了右边。

我认为更好的解决方案，虽然是增加position: relative;给你浮动的权利，以及链接，并给它的z-index比.content更高：

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

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

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

来源

2011-03-08 16:29:26

位置：相对原因锚点是不可点击的

回答

相关问题