html - 在纯CSS选项卡菜单中偏移 anchor

我想在我的页面中集成一个带有标签的部分，并在纯CSS3中找到了一个很好的教程http://t3n.de/news/css3-dynamische-tabs-ohne-365861/
举个例子：http://jsfiddle.net/6wcfH/
HTML的基本结构如下所示：

<article class="infobox">
<section id="allgemeines">
    <h2><a href="#allgemeines">Allgemeines</a></h2>
    <p>Hier stehen ganz allgemeine Informationen.</p>
</section>
<section id="funktionen">
    <h2><a href="#funktionen">Funktionen</a></h2>
    <p>Hier stehen Informationen zu den Funktionen</p>
</section>
<section id="preise">
    <h2><a href="#preise">Preise</a></h2>
    <p>Hier stehen Informationen zu den Preisen.</p>
</section>

我只是复制了代码，并改变了整个东西的位置，以适应我的页面。
现在h2s中的链接显示为选项卡，单击它们将显示相应部分。
我的问题是：现在这将以某种方式跳跃，这样h2元素将显示在视野之外（上图）。我正在寻找一种方法来抵消它，这样我会跳到稍微高一点的位置。
到目前为止，我已经找到了将跨距插入标题并将跨距移得更高并跳到标题的方法。但是，我不能应用这种策略，因为我想跳转到文章中的某个部分，而不是某个内联元素。
如果不使用JavaScript而只使用纯CSS来实现块的绝对定位元素的偏移量，有什么方法呢？

最佳答案

纯CSS解决方案：
这是我的Fiddle
编辑：我把你的孩子改成了第N种类型。这不是解决问题所必需的！
我添加了一种防止页面跳转的方法。请参阅HTML：

<span class="targetFix" id="allgemeines"></span>

以及CSS：

.targetFix {
    position: fixed;
    top: 0;
    left: 0;
}