Adloun

CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 6 · Exercice de TD

L'en-tête qui ne colle pas

Positionnement et empilement · niveau 3 (difficile)

Énoncé

L'en-tête de cette page devait rester en haut de la fenêtre, mais il défile avec le reste :


<div class="page">
  <header class="entete">
    <p>La Librairie du Campus</p>
  </header>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

/* Erreur : l'ancêtre .page coupe son débordement */
.page {
  overflow: hidden;
}

.entete {
  position: sticky;
  top: 0;
  background: #1f3a68;
  color: #fff;
}
  • Quelle condition du collage n'est pas remplie ?
  • Le développeur avait mis overflow: hidden pour couper une image trop large. Proposer une correction qui garde cette intention.
  • Que se passerait-il si l'en-tête était seul dans un <div> sans autre contenu ?

Corrigé

  • La boîte collante colle dans son plus proche ancêtre qui défile. Avec overflow: hidden, .page devient cet ancêtre ; mais elle a la hauteur de son contenu et ne défile jamais : l'en-tête n'a rien à quoi coller. Après un défilement de 300 pixels, Chromium donne une ordonnée de pour l'en-tête : il est parti avec la page.
  • overflow: clip coupe aussi ce qui dépasse, mais ne fait pas de .page un conteneur de défilement :

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.page {
  overflow: clip;
}

.entete {
  position: sticky;
  top: 0;
  background: #1f3a68;
  color: #fff;
}

L'en-tête reste en 0 après le défilement. Mieux encore : empêcher l'image de déborder, avec max-width: 100%.

  • Une boîte collante ne sort pas de son parent : si le parent n'a que l'en-tête, il a la hauteur de l'en-tête, et l'en-tête n'a aucune distance où coller. Il faut que l'en-tête soit l'enfant d'un élément qui contient aussi la page (ici, le <body>).

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →