Связанное решение перекрытия перекрытий, вызывающее другие проблемы с перекрытием

Я пытаюсь создать прикрепленный заголовок, используя Bootstrap Affix. У меня есть мой навигационный бар, чтобы правильно подключаться, но затем я сталкиваюсь с проблемой, когда я привязываю ссылки пользователя; навигационная панель перекрывает текст якорной ссылки при первой загрузке. Я нашел решение для этого здесь, и в частности я использую этот 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;
}