固定的标题和锚链接：如何减少可点击区域？

Question

我正在使用JavaScript从HTML文本页面自动创建脚注。 JS代码基于以下示例：https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Auto-Footnoter（德语描述）。该脚本基本上会收集文本中所有用<span class="fn">标记的元素，在页面底部的脚注说明中创建一个div元素，并在文本的脚注锚点中添加反向链接。其结果与维基百科的脚注系统相当。在我根据自己的需要调整之后，JS脚本基本上可以正常工作。

在页面顶部，我使用的是固定标题。为了使锚链接可见，我将类fnheader添加到了JS脚本使用以下CSS创建的a标签中：

a.fnheader {    
    position:relative;
    margin-top:-150px;
    padding-top:150px;
    visibility:none;
    }

我通常希望提供的解决方案能听到https://stackoverflow.com/a/13184714/10321738，但是display: block;不适用于脚注（它们都在页面的左侧对齐，但不再在文本中对齐） ），上面的CSS就是这样。

因此标头不再隐藏锚链接。但是现在的问题是CSS添加了150 px的填充。当我遇到文字中的这种情况

bla blah blah bla bla blah bla blah blah
bla bla bla blah [1] bla blah bla blah
bla bla bla bla [2] blah bla blah bla

其中1和[2]代表脚注，单击1使我对脚注[2]的描述，因为[2]链接的顶部填充扩展到了该行脚注1中。仅当指向脚注1上方的行中的相应位置时，脚注1的链接才可单击。我认为问题很明显...

有什么方法可以减少脚注链接的可点击区域（最好是CSS）？还是有人有更好的主意来解决固定标头的问题？

谢谢您对此事的任何建议！

编辑：一些其他信息可以使问题更清楚：JS脚本将样式fnheader应用于文本中的脚注。它将150 px的填充顶部添加到链接，以便将其向下移动到页面顶部的固定标头中。这会导致您在单击1时获得对[2]的脚注描述的效果，因为填充也将脚注的可单击链接区域扩展到了前一行。

很遗憾，我无法在此处提供任何代码。

编辑2：我只是在文本的脚注中使用了1 px的实线边框，以直观地了解发生了什么问题。看起来像这样：

如您所见，顶部填充被扩展到顶部（如预期的那样），以超过页面顶部的固定标题。这样可以将可点击区域扩展到前面的行以及文本中的其他脚注（如屏幕截图所示）。