绝对定位的链接在点击时转移到意外位置（a：活动）

Question

我在此页面上有几个链接（http://tuscaroratackle.com），这些链接最终处于其处于活动状态的意外位置。链接是绝对定位的，所以我猜这个问题部分归因于此。但我无法弄清楚应用了哪些规则：主动使它们向下移动到目前为止。我确实有一条规则让他们在活跃时“压低”（a:active {position:relative; top:1px;}），但却无法弄清楚为什么他们变得如此糟糕。

有问题的链接是这些：

这是悬停时出现的“See Rods”链接。如果你点击，你会看到尴尬的结果定位。

对于那些不知道的人（我最近发现）你可以检查：firefug中的：active状态。只需使用样式选项卡上的下拉箭头即可切换这些样式。

Answer 1

来自position:absolute的说明：
生成一个绝对定位的元素，相对于第一个具有静态位置的父元素定位。

而且，正如您所指出的，您为position:relative;定义了a:active。因此，现在<a><span></span></a> span a的组合位置相对于.hp-promo-item的位置计算，而不是a的位置。

至于解决方案，如果您需要将:active向下移动margin-top上的1个像素，那么margin-top:1px可能会更好。但是等一下，.promo-content .icon已经margin-top:2px !important;了。那么，也许:active。我真的不明白建议更多的目的。

PS感谢您在firebug中讲述{{1}}帮助器，非常有用！