Position absolute on :active is behaving weird

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, f开发者_运维知识库rom 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.

---

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...

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