Affixed header overlap solution causing other overlap issues

问题

I'm trying to create an affixed header using Bootstrap's Affix. I've got my nav bar to affix properly, but I then run into an issue when I user anchor links; the nav bar overlaps the anchor link text when it first loads up. I've found a solution to that here, and in particular I'm using this comment (because I want the anchor text to be visible).

However, that solution makes the link be placed on top of the html before the anchor link, meaning that if I click anywhere there I end up inadvertently clicking on the link. I tried adding a z-index: -10000;, but that didn't seem to have any effect.

How else can I either hide the anchor link behind other HTML, or get the affixed navbar to not appear over my anchor link text?

Here is the simplified version of what I currently have:

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;
}

来源：https://stackoverflow.com/questions/29101754/affixed-header-overlap-solution-causing-other-overlap-issues