在纯CSS选项卡菜单中偏移锚点

Question

我想在我的页面中集成一个带有选项卡的部分,并在纯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？

Answer 1

纯CSS解决方案:

这是我的小提琴

编辑:我把你的孩子改成了nth-of-type.这对解决方案来说没有必要!

我添加了一种防止页面跳跃的方法.见HTML:

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

而CSS:

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