Comment puis-je ajuster les décalages des liens d'ancrage pour tenir compte des en-têtes fixes ?

Ajustement des décalages d'ancrage HTML pour les en-têtes fixes

Lors de la navigation dans une page Web à l'aide de liens d'ancrage, les en-têtes fixes peuvent perturber l'expérience en obstruant le contenu derrière eux. Pour résoudre ce problème, il est nécessaire de décaler l'ancre pour tenir compte de la hauteur du linteau. Ceci peut être réalisé via CSS, HTML ou JavaScript.

Solution CSS

La solution CSS consiste à attribuer une classe à l'élément d'ancrage :

<a class="anchor">

Ensuite, en utilisant CSS, vous pouvez ajuster la position de l'ancre par rapport à sa position réelle sur la page. Par exemple, le CSS suivant décalerait l'ancre de 25 px :

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

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!