html - :active is behaving weird 上的绝对位置

Question

我想要实现的是让我网站上的链接在处于事件状态(用户点击它们)时向下移动 1px

我通过应用这种全局样式来做到这一点:

a:active {
    position:relative;
    top:1px;
}

而且在大多数情况下它当然有效。问题是当我尝试对绝对定位的链接执行相同操作时。由于上述样式会将它们的位置更改为相对位置，从而将它们返回到文档流，从而扭曲布局，因此我为它们应用了这种样式:

#absolutly-positioned-link:active {
    position:absolute;
    /*and here I state their current position - 1px*/
}

现在不是将元素向下移动一个像素，而是出于某种原因将它发送到包装元素的顶部。这是发生了什么的简单演示 -> http://jsfiddle.net/Husar/ns5L7/

在 fiddle 中，我有两个示例，如您所见，标题链接工作正常，但单击底部的上一个/下一个链接只会将它们启动到顶部。

到目前为止，我找到的唯一解决方案是，我明确声明哪些链接不是绝对定位的，而不是全局 a:active 样式(即类似于长 nav a:active， p a:active, h2 a:active, li a:active selector), 而不是通过改变它们的坐标来应用绝对定位元素的样式，而不在 :active 选择器中声明它们是绝对定位的。简化后，这个 fiddle 演示了它 -> http://jsfiddle.net/Husar/HfvCs/

这很好用，但我不认为它是最优雅的解决方案，我也不明白为什么会出现这种行为。

如果有人对这个问题有更多了解以及如何解决，我们将不胜感激。

Answer 1

问题是您用 position: relative; 覆盖了 position: absolute; 所以定位完全搞砸了 :P 我通常使用边距作为解决方法.但是当然这只有在你的元素不应该有任何其他上边距的情况下才有效......

a:active {
    margin-top:1px;
}