Wie kann ich Anker beheben, die in CSS hinter einen festen Header springen?

Anpassen des HTML-Ankers für feste Header mithilfe von CSS

Bei der Arbeit mit festen Headern kommt es häufig zu Situationen, in denen Anker mit Inhalten innerhalb der verknüpft sind Die Seite springt an den Anfang der Seite und verdeckt den Inhalt hinter der Kopfzeile. Um dieses Problem zu lösen, kann man den Versatz der Anker anpassen, um ihn an der Unterseite des festen Headers auszurichten.

Eine effektive Lösung ist die Verwendung von CSS:

1. Weisen Sie einen Anker zu Klasse: Weisen Sie dem Anker eine benutzerdefinierte Klasse zu, z „Anker.“

<a class="anchor">

2. Positionieren Sie den Anker: Gestalten Sie den Anker so, dass er sich wie ein Blockelement verhält, und positionieren Sie ihn relativ. Indem Sie einen negativen Wert für „oben“ festlegen, können Sie den Anker von seiner tatsächlichen Position auf der Seite nach oben verschieben.

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

Diese Anpassung stellt sicher, dass der Anker immer noch auf den richtigen Inhalt verweist, und gleicht dies aus der verborgene Teil hinter der Kopfzeile. Beachten Sie, dass die Sichtbarkeit: versteckt; Die Eigenschaft wird verwendet, um zu verhindern, dass der Anker optisch sichtbar ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Anker beheben, die in CSS hinter einen festen Header springen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!