Anchor-Link skips too far - html

Question

At the top of a website I'm currently working on, I defined a «Skip to content»-Link with the following markup:
Skip to content
I placed this link somewhere outside the viewport, using CSS position: absolute. As soon as somebody focusses the link (when «tabbing» trough the page), the link gets moved back to the viewport and it pushes the content below down a bit, so it gets the space it needs.
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}
If you now click the link, my browser skips to the content correctly, but after that the link looses focus, so the content slips up again a little bit (because the link above gets moved out of the viewport again). So in the end, you need to scroll up a little bit to see the beginning of the content. It looks, as if the anchor link would skip too far.
Is there any way I can make sure, the link always skips to the content and not some pixels below?
Please don't suggest any JavaScript-Solutions, this is basic functionality that needs to work in every browser. Thanks for your help.
— André

Answer 1

While not an elegant solution, try adding this to your CSS, it may give you an idea of how to fix it.
#content {
margin-top: -60px;
padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}
Where 60px is the approximate added height when the skip link is visible. It's just moving the top edge of #content up a little bit. You can try different measurements to get the padding back to where it needs to be. I didn't want to suggest wrapper divs or anything, but that could work to give you the exact 1.1em top padding you originally had.
If you can figure out the exact total added height when the link is visible, use that measurement in ems instead of px.

Answer 2

You could just not reset the position back to static in your :focus rule.