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

我正试图创建一个附加标题使用引导的粘贴。我已经把导航条贴好了，但是当我使用锚链接时，我遇到了一个问题；导航栏首次加载时与锚定链接文本重叠。我已经找到了解决方案，尤其是我正在使用它（因为我希望锚文本可见）

然而，该解决方案使链接位于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>

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

你的代码是什么样子的？@aaronburrows添加了相关的位。在我使用它的地方，我看到我已经从
margin
方法更改为使用透明边框的方法。我没有任何关于旧方法的错误的注释，除了我从Nicholas Gallagher的一篇帖子中得到了边界的想法：也许这是Chrome的一个问题，正如一些人提到的。如果这个方法有效，我将添加它作为答案。