Comment puis-je décaler les ancres pour tenir compte des en-têtes fixes ?

Ancres décalées pour l'ajustement d'en-tête fixe

Souvent, les en-têtes fixes sur une page Web peuvent obstruer le contenu lors des liens vers des ancres dans la page. Pour résoudre ce problème, envisagez de mettre en œuvre la solution suivante :

Décalage CSS

Créez une classe personnalisée pour les ancres que vous souhaitez décaler. Par exemple :

<a class="anchor">

Stylez les ancres avec CSS comme suit :

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

Dans cet exemple, l'ancre est positionnée à 25 px vers le haut par rapport à son emplacement réel. Ajustez la valeur « supérieure » ​​pour qu'elle corresponde à la hauteur de votre linteau fixe.

Les ancres sembleront maintenant sauter à leur emplacement prévu, compensant ainsi efficacement l'obstruction de l'en-tête fixe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!