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

Anker versetzen, um sie an feste Header anzupassen

Wenn auf einer Webseite ein fester Header vorhanden ist, führt das Klicken auf einen Anker darunter zu dem Seitensprung, sodass der Anker am oberen Rand der Seite ausgerichtet ist. Dadurch können Inhalte verdeckt werden, auf die möglicherweise gleichzeitig verwiesen werden muss.

Lösung: HTML/CSS-Versatztechnik

Um dieses Problem zu beheben, können Sie die Position des Ankers mithilfe von CSS versetzen :

1. Weisen Sie dem eine Klasse zu Anker:

   <a class="anchor">

2. Konvertieren Sie den Anker in ein Blockelement und positionieren Sie ihn relativ:

   a.anchor {
    display: block;
    position: relative;
   }

3. Wenden Sie zum Verschieben einen negativen Versatz an der Anker über seiner tatsächlichen Position:

   a.anchor {
    top: -250px;
   }

Dieser Versatzwert sollte basierend auf der Höhe von angepasst werden Ihren festen Header, um sicherzustellen, dass der Anker korrekt an der Position des Inhalts auf der Seite ausgerichtet ist.

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