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

Décalage de l'ancre HTML pour l'en-tête fixe

Lorsque vous travaillez avec des en-têtes fixes, le positionnement des ancres HTML peut devenir problématique. Comme l'en-tête reste en haut de la page, un lien vers une ancre dans la page fait sauter la page, masquant le contenu derrière l'en-tête. Pour résoudre ce problème, un décalage peut être appliqué à l'ancre.

Solution CSS :

Utilisez CSS pour ajuster la position de l'ancre sans utiliser JavaScript. Attribuez une classe à l'ancre :

<a class="anchor">

Cette ancre peut ensuite être décalée par rapport à son emplacement réel sur la page en la positionnant comme un élément de bloc et en lui appliquant une position : relative; style :

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

La valeur de "top" (-250px dans cet exemple) représente le montant du décalage. Cela déplacera l'ancre de 250 pixels vers le haut par rapport à sa position d'origine. L'attribut "visibilité : caché" empêche l'ancre d'être visible mais lui permet de toujours répondre aux clics.

Notez que la valeur exacte du décalage peut varier en fonction de la hauteur de votre en-tête. Ajustez-le en conséquence pour garantir que l'ancre défile jusqu'à la bonne position sur la page.

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!