Lösung für die durch die obere feste Navigationsleiste blockierte CSS-Ankerpositionierung

Viele Websites verfügen oben über eine feste Navigationsleiste, die den Benutzern die Suche und den Sprung zu anderen Seiten erleichtert.

Gleichzeitig wird ein Inhaltsverzeichnis hinzugefügt, um Benutzern das Durchsuchen langer Dokumente zu erleichtern. Klicken Sie auf den Absatztitel, um zur Position des Absatzes zu springen.

Wie in der Abbildung gezeigt:

Wenn Sie Anker verwenden, um zu einem Verzeichnis zu springen, kann es vorkommen, dass die feste Navigationsleiste den Titel verdeckt.

1. Ankerpositionierungsmechanismus

Wenn keine Bildlaufleiste vorhanden ist, ist der Anker ungültig.

Wenn eine Bildlaufleiste vorhanden ist, wird diese an die obere Kante padding-box des Ankerelements verschoben, das dem Adress-Hash entspricht (dem Inhalt nach dem #-Zeichen in der Adresse).

2. Lösung

Beispiel

Beispielquellcode

Beispiel einer Online-Vorschau

(1) Polsterung + Rand

Die Polsterung beeinflusst die Positionierung der Ankerelemente, während der Rand die Positionierung der Ankerelemente nicht beeinflusst. Daher wird die Polsterung verwendet, um die Position des Ankerelements nach dem Springen anzupassen, und der Rand wird verwendet, um die Auswirkungen der Polsterung auf das Layout auszugleichen.

<h3 class="Überschrift zuerst" id="Erste">
    1. Unterschiedliche Zeit und Ort des Auftretens</h3>

.Erste {
    padding-top: 60px;/* 60px ist die Höhe der Navigationsleiste*/
    Rand oben: -60px;
 } 

Vorteil

Für diese Lösung ist das Hinzufügen zusätzlicher Elemente nicht erforderlich, das Problem kann direkt mithilfe von CSS gelöst werden.

Mangel

Wenn die Dokumentebene einer Überschrift nicht mit der eines Absatzes übereinstimmt, kann dies dazu führen, dass andere Elemente verdeckt werden.

Beispiel: Der Titel verwendet relative Positionierung, um die Dokumenthierarchie anzuheben. Der Absatz über dem Titel, der durch das Layout blockiert ist, lässt sich mit der Maus nicht auswählen. Das Dokument kann daher nicht kopiert werden.

(2) Verwenden Sie span oder ein Tag als Ankerelement

padding nicht ersetzter Inline-Elemente hat keinen Einfluss auf das Layout, kann aber die Ankerposition beeinflussen.

<h3 Klasse="Überschrift">
    <span id="zweite" class="title_placeholder">
    2. require/exports wird zur Laufzeit dynamisch geladen, import/export wird statisch kompiliert</span>
</h3>

.Titelplatzhalter {
    Polsterung oben: 60px;
} 

Mangel

Wie Lösung (1)

(3) Dunkler Ankerpunkt

Fügen Sie über dem zu positionierenden Element ein leeres Ankerelement hinzu, das das Layout nicht beeinflusst.

Da die Position des Ankerpunkts nach dem Springen auf die obere Kante der padding-box des Elements fällt, wirkt sich das Festlegen height auf die Position des Ankerpunkts aus, und das Festlegen margin-top gleicht die Auswirkung des dunklen Ankers auf das Layout aus.

<div Klasse="dark_anchor" id="third"></div>
<h3 Klasse="Überschrift">
    3. require/exports gibt eine Kopie eines Wertes aus, während import/export-Module eine Referenz auf einen Wert ausgeben</h3>

.dark_anchor {
    Höhe: 60px;
    Rand oben: -60px;
} 

Vorteil

Beeinflusst nicht die Mausauswahl anderer Elemente

Mangel

Bei dieser Lösung beeinflusst margin des positionierten Elements die Position des Ankers nach dem Springen, was nicht mit dem direkten Festlegen des Titels als Ankerelement vereinbar ist.

Beispiel: Der Titel (positioniertes Element) hat einen Rand von 20 Pixeln, und der Rand von 20 Pixeln bleibt auch nach dem Sprung des Ankerpunkts erhalten. Wenn Sie möchten, dass der Titel oben fixiert wird, ohne dass er durch margin nach den Sprüngen des Ankerpunkts beeinflusst wird, verwenden Sie diese Lösung mit Vorsicht.

(4): Ziel-Pseudoklasse

Die CSS-Pseudoklasse :target stellt ein eindeutiges Seitenelement (das Zielelement) dar, dessen ID mit dem aktuellen URL-Fragment übereinstimmt.

4. Inkonsistente Nutzung

:Ziel {
    Polsterung oben: 60px;
    Rand oben: -60px;
  } 

Diese Lösung ähnelt der Lösung (1). Beim Springen zu einem bestimmten Ankerpunkt (Klasse) wendet das Ankerpunktelement den Stil :target .

:target :

3. Referenzen

Mechanismus, Anwendung und Probleme der URL-Anker-HTML-Positionierungstechnologie

Reines CSS, um einen Auf- und Ab-Offset zu erreichen, wenn der interne Ankerpunkt der Webseite springt

Wenn der Ankerpunkt auf eine feste Positionierung trifft

Dies ist das Ende dieses Artikels über die Lösung des Problems, dass die CSS-Ankerpositionierung durch die obere feste Navigationsleiste blockiert wird. Weitere verwandte Inhalte zur CSS-Ankerpositionierung, die durch die obere feste Navigationsleiste blockiert wird, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!