Phase 3Mise en page

#9 Affichage et positionnement

display, position, z-index, float

La propriété display

La propriété display contrôle comment un élément participe à la mise en page :

Valeurs de display
/* Block : prend toute la largeur, nouvelle ligne */
div, p, h1, section { display: block; }

/* Inline : suit le flux du texte */
span, a, strong { display: inline; }

/* Inline-block : inline + largeur/hauteur */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
}

/* None : complètement caché */
.cache { display: none; }

Le positionnement

Valeurs de position
/* Relative : décalé de sa position normale */
.tooltip-trigger {
  position: relative;
}

/* Absolute : positionné par rapport à l'ancêtre positionné */
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Fixed : reste en place pendant le scroll */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* Sticky : colle quand on scrolle */
.table-header {
  position: sticky;
  top: 0;
  background: white;
}

Contexte d'empilement (z-index)

z-index
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 50;
}

.modal {
  position: fixed;
  z-index: 51;   /* Au-dessus de l'overlay */
}

À vous de jouer

Essayez les commandes ci-dessous :

terminal — browser
user@stemlegacy:~$