+ (CSS?) Anker soll Abstand zum oberen Rand haben

[Lemmy Danger]

Guude!

Wahrscheinlich ist das, was ich vorhabe, gar nicht möglich:

Ich habe eine Seite mit recht langem Text. Um die Navigation zu vereinfachen, wollte ich eine Inhaltsübersicht an den Seitenanfang stellen und diese mit Sprungverweisen zu den einzelnen Absätzen füllen. Soweit ja auch kein Thema:

<ul>
   <li><a href="#1">Absatz 1</a></li>
   <li><a href="#1">Absatz 2</a></li>
   <li><a href="#1">Absatz 3</a></li>
   ...
</ul>

<h2><a name="1">Überschrift 1</a></h2>

Nun arbeite ich aber mit einer horizontalen, in gescheiten Browsern nicht mitscrollenden Navigationsleiste am oberen Rand, die ich mittels "position:fixed" dort fest positioniert habe. Die Höhe dieser Leiste ist ca 100px. Wenn ich nun zu einem der Anker springen möchte, versteckt sich das eigentliche Sprungziel, die Überschrift eines Absatzes, hinter der Navigationsleiste und mit ihm die ersten Zeilen des selbigen.

Ich könnte die Ziele der Verweise selbstverständlich auch weiter nach oben setzen, sodass die Überschrift des Absatzes jeweils gerade noch lesbar wäre, aber diese Lösung widerstrebt mir. Zum einen wäre ich andauernd am testen, wo genau welches Ziel hinkommt, zum anderen ändert man dann die Fenstergrösse und das Testen war umsonst...
Nun hab ich es mittels CSS und "padding-top" versucht:

<a name="1" style="padding-top:110px;">Überschrift 1</a>

Dies hat zwar das gewünschte Ergebnis zur Folge - die angesprungene Überschrift bleibt sichtbar unterhalb der Navigationsleiste - aber die in der Liste aufgeführten Links werden nun von der ersten Überschrift verdeckt. Sie sind zwar noch sichtbar, können aber nicht mehr angeklickt werden...

Habt Ihr nicht noch eine Lösung für mich parat?

Habt Dank für das Mitgrübeln...
Lemmy