绝对定位的链接在单击时转移到意外位置（a：活动）
我在此页面上有几个链接 (http://tuscaroratackle.com)，这些链接最终出现在其意想不到的位置：活动状态。这些链接是绝对定位的，所以我猜这个问题部分是由于这个原因造成的。但我无法弄清楚 :active 上应用了哪些规则来使它们向下和向左移动到目前为止。我确实有一条规则，使它们在活动时有点“压抑”（ a:active {position:relative; top:1px;} ），但不太明白为什么它们转移得如此严重。
有问题的链接如下：
这是悬停时出现的“See Rods”链接。如果您单击，您会看到尴尬的结果定位。
对于那些不知道的人（我最近发现），您可以检查 firefug 中的 :active 状态。只需使用样式选项卡上的下拉箭头即可打开这些样式。
I have a couple links on this page (http://tuscaroratackle.com) that are ending up at unexpected positions in their :active state. The links are absolutely positioned, so I'm guessing the issue is partly due to that. But I can't figure out what rules are getting applied on :active to make them shift down and to the left so far. I do have one rule that makes them "depress" a bit on active ( a:active {position:relative; top:1px;} ) but can't quite figure out why they are shifting so badly.
The links in question are these:
it's the "See Rods" link that appears on hover. If you click you'll see the awkward resulting positioning.
Also for those that don't know (I recently found out) you can inspect the :active state in firefug. Just use the drop down arrow on the style tab to toggle those styles on.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
来自
position:absolute的描述：生成一个绝对定位的元素，相对于具有非 static 位置的第一个父元素定位。
并且，正如您所指出的，您已为 < 定义了
position:relative;代码>a：活动。因此，现在，在中，span的组合位置是相对于的位置进行计数的。 a，而不是.hp-promo-item的位置。至于解决方案，如果您需要在
:active上将a向下移动 1 个像素，也许margin-top会更好。但是等等，您已经有了.promo-content .icon的margin-top:1px。好吧，也许是margin-top:2px !important;那么。我真的不明白提出更多建议的目的。PS 感谢您介绍 firebug 中的
:active助手，非常有用！From description of
position:absolute:Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
And, as you noted, you have
position:relative;defined fora:active. Now, therefore, in<a><span></span></a>combination position ofspanis counted relative to position ofa, not to position of.hp-promo-item.As for solution, if you need to move
adown 1 pixel on:active, maybemargin-topwill work better. But wait, you already havemargin-top:1pxfor.promo-content .icon. Well, maybemargin-top:2px !important;then. I don't really understand the aim to suggest more.PS Thanks for telling about
:activehelper in firebug, pretty useful!