Positionnement, transitions et animations simples

Flexbox et Grid règlent l’essentiel de la mise en page, mais certaines situations demandent un contrôle plus fin : un en-tête qui reste visible quand on fait défiler, une étiquette posée sur le coin d’une photo, un bouton qui change doucement de couleur au survol. Dans cette leçon, vous découvrez la propriété position, l’empilement des éléments avec z-index, la gestion des débordements et les premières animations CSS, toujours avec le souci de ne gêner personne.

Le flux normal et la propriété position

Par défaut, les éléments se placent dans le flux normal : les blocs s’empilent de haut en bas, les éléments en ligne se suivent comme du texte. La propriété position permet de s’en écarter. Cinq valeurs existent :

Les propriétés top, right, bottom, left indiquent les décalages une fois l’élément positionné.

Relative et absolute : le duo classique

Imaginons une étiquette « Nouveau » posée dans le coin supérieur d’une carte de projet. On rend la carte relative (c’est elle qui servira de repère), puis l’étiquette absolute :

.carte {
  position: relative;
}

.etiquette {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #e0a96d;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
}

Si aucun ancêtre n’est positionné, l’élément absolu se place par rapport à la page entière : un piège fréquent. Pensez donc toujours à placer position: relative sur le parent.

Sticky : l’en-tête qui reste visible

position: sticky est un excellent compromis pour un menu : l’élément défile normalement, puis se fige lorsqu’il atteint le seuil indiqué.

.entete {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Une réserve : un en-tête collé occupe de la place en permanence, ce qui peut être pénible sur un petit écran en mode paysage. Ne lui donnez pas une hauteur excessive. Notez aussi que fixed fait un effet similaire, mais retire l’élément du flux, ce qui oblige à ajouter une marge pour que le contenu ne passe pas dessous.

L’empilement : z-index

Quand deux éléments se chevauchent, lequel est devant ? C’est z-index qui le décide : plus la valeur est élevée, plus l’élément est proche du lecteur. Il ne s’applique qu’aux éléments positionnés (et aux éléments flex ou grid).

.fond-sombre { position: fixed; inset: 0; z-index: 90; }
.fenetre     { position: fixed; z-index: 100; }

La propriété inset: 0 est un raccourci pour top, right, bottom, left à zéro : l’élément couvre tout son repère. Le piège du z-index est qu’il fonctionne par contextes d’empilement : un élément ne peut jamais passer devant un élément extérieur à son contexte, aussi grande que soit sa valeur. N’écrivez donc pas z-index: 99999 par réflexe : gardez une petite échelle (10, 20, 30…) et documentez-la.

Gérer les débordements : overflow

Quand le contenu est plus grand que sa boîte, la propriété overflow décide de ce qui se passe :

• visible (par défaut) : le contenu déborde ;
• hidden : le surplus est coupé (pratique pour arrondir des coins d’image) ;
• scroll : des barres de défilement sont toujours affichées ;
• auto : des barres n’apparaissent que si nécessaire.

.carte { overflow: hidden; border-radius: 12px; }
.code  { overflow-x: auto; }

Les transitions : adoucir un changement

Sans transition, un changement de style est instantané. Avec la propriété transition, il se déroule en douceur sur une durée donnée. Voici la syntaxe : propriété animée, durée, fonction de progression, délai facultatif.

.bouton {
  background-color: #1d4e5f;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.bouton:hover,
.bouton:focus-visible {
  background-color: #2f7287;
  transform: translateY(-2px);
}

On déclare la transition sur l’état de base de l’élément, et on décrit la valeur finale dans l’état de survol ou de focus. Les fonctions de progression les plus courantes sont ease (démarrage et fin doux), linear, ease-in, ease-out et ease-in-out.

Deux conseils : gardez des durées courtes (entre 0,15 et 0,4 seconde pour un retour d’interface) et privilégiez l’animation de transform et opacity, des propriétés que le navigateur sait animer très efficacement, plutôt que width, height ou margin, qui obligent à recalculer la mise en page.

La propriété transform

transform déforme visuellement un élément sans modifier la mise en page autour de lui : translate (déplacer), scale (agrandir), rotate (tourner), éventuellement combinés.

.carte:hover {
  transform: translateY(-4px) scale(1.02);
}

Comme l’élément transformé garde sa place d’origine pour ses voisins, il n’y a aucune secousse dans la page : idéal pour des effets de survol.

Les animations avec @keyframes

Pour une animation plus riche qu’une transition entre deux états, on définit des images clés avec @keyframes, puis on les applique avec animation :

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  animation: apparition 0.6s ease-out both;
}

La règle @keyframes nomme l’animation et décrit son déroulement (avec from et to, ou des pourcentages pour plus d’étapes). La propriété animation la déclenche, avec une durée, une fonction de progression et éventuellement infinite pour répéter. La valeur both applique l’état initial avant le départ et conserve l’état final après.

Animer avec discernement

Les animations peuvent embellir, mais aussi gêner. Certaines personnes sont sensibles au mouvement : écrans qui bougent, effets de parallaxe ou de défilement peuvent provoquer vertiges ou nausées. Les systèmes d’exploitation proposent un réglage « réduire les animations », que CSS permet de respecter avec la condition prefers-reduced-motion :

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Vous retrouverez ce point au chapitre 5, consacré à l’accessibilité. Retenez les principes suivants : ne faites jamais passer une information importante uniquement par une animation, évitez les mouvements en boucle qui attirent l’œil de manière continue, et gardez toute animation brève et utile.

Le portfolio de Camille : des finitions

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fafaf7;
}

.carte {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
}

@media (prefers-reduced-motion: reduce) {
  .carte { transition: none; }
  .carte:hover { transform: none; }
}

À vous de jouer

1. Rendez l’en-tête collant en haut de la fenêtre avec position: sticky ;
2. ajoutez une étiquette « Nouveau » en haut à droite d’une carte avec relative et absolute ;
3. donnez aux boutons une transition douce sur la couleur de fond ;
4. ajoutez un léger soulèvement des cartes au survol, puis une règle qui désactive les effets pour les personnes qui préfèrent moins de mouvement.

.entete { position: sticky; top: 0; z-index: 10; background: #fafaf7; }

.carte { position: relative; transition: transform 0.2s ease; }
.carte:hover { transform: translateY(-4px); }

.etiquette {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #e0a96d;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.bouton { background-color: #1d4e5f; transition: background-color 0.2s ease; }
.bouton:hover { background-color: #2f7287; }

@media (prefers-reduced-motion: reduce) {
  .carte, .bouton { transition: none; }
  .carte:hover { transform: none; }
}

Vous disposez maintenant de tous les outils de mise en page. Le chapitre suivant porte sur la qualité : organisation du CSS, accessibilité, performance et référencement.