CSS

Créer une ancre avec un en-tête fixe

Publié en avril 2014 2 extraits de code par Rémy Montangé

Fiche écrite en 2014 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Avec un en-tête fixe en haut de l’écran, un lien vers une ancre fait défiler la page… et le titre visé se retrouve caché sous l’en-tête. L’astuce historique consiste à décaler la cible vers le haut avec une marge négative compensée par un espacement intérieur.

HTML

<header>
  <nav>
    <ul>
      <li><a href="#ancre1">Ancre 1</a></li>
      <li><a href="#ancre2">Ancre 2</a></li>
      <li><a href="#ancre3">Ancre 3</a></li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <h2> <a name="ancre1">Ancre 1</a></h2>
    <p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p>
    <h2> <a name="ancre2">Ancre 2</a></h2>
    <p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p>
    <h2> <a name="ancre3">Ancre 3</a></h2>
    <p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p> <p>blabla</p><p>blabla</p>
  </article>
</section>

CSS

header{
  position:fixed;
  top:0;
  height:150px;
  background:#CCCCCC;
  width:100%;
  margin:0
}

section{
  margin-top:150px;
  width:100%;
}

section h2 a{
  margin-top:-150px;
  padding-top:150px;
}

Autres fiches CSS