绝对位置：active 表现得很奇怪

发布于 2024-12-01 20:52:51 字数 1032 浏览 0 评论 0原文

我想要实现的是，当我的网站上的链接处于活动状态（用户点击它们）时，使它们向下移动 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/

在小提琴中我有两个例子，就像你一样可以看到，标题链接工作得很好，但单击底部的上一个/下一个链接只会将它们启动到顶部。

到目前为止，我发现的唯一解决方案是，我明确声明哪些链接不是绝对定位的，而不是全局 a:active 样式（即类似于长 nav a:active, pa:active , h2 a:active, li a:active 选择器），然后通过更改绝对定位元素的坐标来应用绝对定位元素的样式，而无需在 :active 选择器中声明它们是绝对定位的。简单来说，这个小提琴演示了它 -> http://jsfiddle.net/Husar/HfvCs/

这工作正常，但我不认为它是最优雅的解决方案，我也不明白为什么会发生这种行为。

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

原文

What I want to achieve is to make links on my site move 1px down when they are in an active state (user clicks on them)

I am doing this by applying this global style:

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

And it of course works - in most cases. Problem is when I try to do the same on links that are positioned absolutely. Since the above style will change their position to relative and thus return them to to document flow, distorting the layout, so I have applied this style for them:

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

Now instead of moving the element a pixel down, from some reason this sends it to the top of the wrapper element.
Here is a simple demo of what happens -> http://jsfiddle.net/Husar/ns5L7/

In the fiddle I have both examples, as you can see, the header links works just fine, but clicking the prev/next links at the bottom just launches them to the top.

The only solution I found so far is that instead of the global a:active style I explicitly state which links are not absolutly positioned (ie something like a long nav a:active, p a:active, h2 a:active, li a:active selector), and than apply the styles for the absolutely positioned elements by just changing their coordinates, without stating in the :active selector that they are absolutely positioned.
Simplified, this fiddle demonstrates it -> http://jsfiddle.net/Husar/HfvCs/

This works fine, however I don't think it to be the most elegant solution nor do I understand why this behavior is occurring.

If anyone knows something more about this issue and how it can be solved, help will surly be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白昼 2024-12-08 20:52:51

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

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

The problem is that you override the position: absolute; with your position: relative; so the positioning is totally screwed :P I usually use margin as a work-around. But of course this only works if your element is not supposed to have any other top margin...