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

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 元素将显示在视野之外(上图)。我正在寻找一种方法来抵消它，以便我会跳到稍微高一点的位置。

到目前为止，我找到了实现将 span 插入标题并将 span 移得更高并跳转到该标题的方法。但是，我不能应用该策略，因为我想跳转到文章中的某个部分，而不是某些内联元素。

有什么方法可以在不使用 JavaScript 而是使用纯 CSS 的情况下实现 block 绝对定位元素的偏移量？

Answer 1

纯 CSS 解决方案:

这是我的 Fiddle

编辑:我将您的 child 更改为第 nth-of-type。这不是解决方案所必需的!

我添加了一个方法来防止页面跳转。见 HTML:

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

还有 CSS:

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