[CSS]Ancre cachée par un menu en position:fixed

NoSmoking

Principe

Lorsqu'il existe en haut de la page une partie fixe, un menu typiquement, et que l'on souhaite accéder à une ancre de la page, cette ancre se positionne sous la partie fixe et non juste en dessous.

Pour remédier à cela on peut simplement utiliser un pseudo-élément que l'on positionne juste au dessus de l'élément à atteindre.

Le code CSS à ajouter à la page est des plus succinct : 

:target::before {
  content: " ";
  display: block;
  height: 4rem;         /* hauteur de la partie fixe */
  margin-top: -4rem;    /* moins la hauteur de la partie fixe */
}

Il ne faut pas oublier de mettre un padding-top sur le <body> pour que le haut de page soit toujours visible. 

body {
  padding-top: 4rem;    /* hauteur de la partie fixe */
}

Les propriétés height et margin-top sont à ajuster suivant la hauteur de la partie fixe. Il peut être intéressant de passer par une variable CSS pour définir le décalage.

Avec ce CSS c'est le pseudo-élément qui est masqué par la partie fixe.

Inutile donc d'ajouter des éléments à la page.

Il est important de ne pas mettre de fond sur les éléments ciblés sous risque de masquer une partie des éléments qui le précédent.

Pour bien visualiser cet effet de bord il suffit d'ajouter le CSS suivant : 

:target {
  color: #F00;
  background-color: rgba(255,0,0,.2);
}

Accéder au Contenu 4

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Contenu 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.