Positionnement et empilement

Les cartes de la Librairie du Campus sont prêtes, mais la page reste un empilement sage de boîtes, chacune sous la précédente. Un vrai site fait autrement : l'en-tête reste visible quand on fait défiler la page, une pastille « Nouveauté » est posée sur le coin d'une carte, une fenêtre de confirmation recouvre la page en l'assombrissant. Dans les trois cas, une boîte quitte sa place naturelle pour se poser ailleurs, parfois par-dessus les autres.

C'est le rôle de la propriété position, et de son inséparable compagne z-index, qui règle l'ordre d'empilement. Ce chapitre les explique avec des coordonnées mesurées, puis traite des flottants, à leur juste place : habiller une image de texte, et rien d'autre.

6.1 Le flux normal

Sans indication particulière, le navigateur place les boîtes selon le flux normal, que le chapitre 5 a décrit :

• les boîtes de bloc s'empilent verticalement, de haut en bas, chacune sur toute la largeur de son parent, séparées par leurs marges (qui peuvent fusionner) ;
• les boîtes en ligne se suivent horizontalement dans des lignes, qui passent à la ligne suivante quand la place manque ;
• chaque boîte occupe une place : si l'une grandit, les suivantes descendent.

Le flux normal est le bon choix par défaut. Il s'adapte tout seul à la largeur de la fenêtre, à la taille du texte, à la longueur des traductions. Le positionnement sert à des cas précis ; Flexbox et Grid (chapitres suivants) servent à disposer des groupes de boîtes. Jamais on ne construit la mise en page d'un site en positionnant chaque boîte à des coordonnées fixes.

6.2 position: relative

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

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

.boite {
  width: 200px;
  height: 50px;
  padding: 8px;
  margin-bottom: 10px;
  background: #dbe4f0;
  border: 2px solid #1f3a68;
}

.decalee {
  position: relative;
  top: 20px;
  left: 40px;
  background: #f3dcc4;
}

La deuxième boîte devrait commencer, dans le flux normal, à l'abscisse 16 et à l'ordonnée $16+50+10=76$. Chromium la place en $(56,96)$ : décalée de 40 pixels vers la droite et de 20 vers le bas. La troisième boîte, elle, commence à l'ordonnée 136, exactement comme si la deuxième n'avait pas bougé ; d'où le chevauchement.

On décale rarement une boîte de cette façon. L'usage principal de position: relative est ailleurs, sans aucun décalage : faire de la boîte la référence de ses descendants positionnés en absolu.

6.3 position: absolute et le bloc conteneur

<p>Un paragraphe avant le cadre.</p>
<div class="cadre">
  <p>Le cadre est positionné (relative) : il sert de référence.</p>
  <span class="pastille">Nouveau</span>
</div>
<span class="egaree">Sans ancêtre positionné</span>

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

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

.cadre {
  position: relative;
  width: 400px;
  height: 120px;
  padding: 12px;
  margin-left: 40px;
  border: 4px solid #1f3a68;
}

.pastille {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  color: #fff;
  background: #1f3a68;
}

.egaree {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 8px;
  background: #f3dcc4;
}

Vérifions les coordonnées dans Chromium, fenêtre de 800 sur 600 :

• le cadre commence en $(56,50)$ : 16 de marge du <body> plus 40 de marge gauche ; le paragraphe précédent occupe les ordonnées 16 à 34, suivi de 16 de marge ;
• la pastille a pour haut $50+4+10=64$ : haut du cadre, plus sa bordure, plus top: 10px ;
• son bord droit est en $56+400-4-10=442$ : bord droit du cadre, moins la bordure, moins right: 10px. Chromium donne une abscisse de 361,86 pour une largeur de 80,14, soit bien 442 ;
• la seconde pastille n'a pas d'ancêtre positionné : elle se cale en bas à droite du bloc conteneur initial. Son bord droit est à 800, son bord bas à 600 (ordonnée 578, hauteur 22).

Remarquez que la pastille recouvre le texte du cadre : retirée du flux, elle ne réserve aucune place. C'est à l'auteur de prévoir l'espace, par exemple avec un rembourrage du cadre.