Question

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

我通过应用这种全球风格来做到这一点：

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

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

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

现在不是将元素向下移动一个像素，而是将其发送到包装元素的顶部。以下是发生的事情的简单演示 - ＆gt; http://jsfiddle.net/Husar/ns5L7/

在小提琴中我有两个例子，正如你所看到的，标题链接工作正常，但点击底部的上一个/下一个链接只是将它们发送到顶部。

我到目前为止找到的唯一解决方案是，我明确说明哪些链接不是绝对定位的（而不是长a:active选择器），而不是全局nav a:active, p a:active, h2 a:active, li a:active样式，而不是应用样式对于绝对定位的元素，只需改变它们的坐标，而不在：主动选择器中说明它们是绝对定位的。简而言之，这个小提琴演示了它 - ＆gt; http://jsfiddle.net/Husar/HfvCs/

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

如果有人对这个问题有更多了解以及如何解决这个问题，那么将非常感谢帮助。

Answer 1

问题是你用你的position: absolute;覆盖position: relative;所以定位完全搞定：P我通常使用保证金作为解决方法。但当然，只有当你的元素不应该有任何其他的上边距时，这才有效...

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

绝对位置：活动表现得很奇怪

1 个答案: