附加标题重叠解决方案导致其他重叠问题

Question

我正在尝试使用Bootstrap的Affix创建一个附加标题。我的导航栏正确贴上，但是当我使用锚链接时，我遇到了一个问题。导航栏在首次加载时与锚链接文本重叠。我找到了here的解决方案，特别是我正在使用此comment（因为我希望锚文本可见）。

但是，该解决方案使得链接在锚链接之前放置在html之上，这意味着如果我点击任何地方，我最终无意中点击了链接。我尝试添加z-index: -10000;，但这似乎没有任何效果。

我还能如何隐藏其他HTML背后的锚链接，或者将附加的导航栏显示在我的锚链接文本上？

以下是我目前所拥有的简化版本：

HTML：

<div class="nav" data-spy="affix" data-offset-top="1" data-offset-bottom="200">
    ....
</div>
...
<a class="anchor" name="link" href="#link">link text</a>

CSS：

a.anchor:before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 1em;
    margin-top: -1em;
}