Wie kann ich Anker versetzen, um feste Header zu berücksichtigen?

Versetzen von Ankern zur Anpassung fester Header

Oft können feste Header auf einer Webseite den Inhalt behindern, wenn auf Anker innerhalb der Seite verlinkt wird. Um dieses Problem zu beheben, sollten Sie die Implementierung der folgenden Lösung in Betracht ziehen:

CSS-Offset

Erstellen Sie eine benutzerdefinierte Klasse für die Anker, die Sie versetzen möchten. Zum Beispiel:

<a class="anchor">

Stilisieren Sie die Anker mit CSS wie folgt:

a.anchor {
    display: block;
    position: relative;
    top: -25px;
    visibility: hidden;
}

In diesem Beispiel wird der Anker 25 Pixel nach oben von seiner tatsächlichen Position positioniert. Passen Sie den Wert „oben“ so an, dass er mit der Höhe Ihres festen Kopfteils übereinstimmt.

Die Anker scheinen nun an ihre vorgesehene Position zu springen, wodurch das Hindernis des festen Kopfteils effektiv ausgeglichen wird.

Das obige ist der detaillierte Inhalt vonWie kann ich Anker versetzen, um feste Header zu berücksichtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!