Aller au contenu

La propriété position

En CSS, la propriété position permet de définir la manière dont un élément HTML est positionné dans la page. Elle influence la disposition, le chevauchement et la superposition des éléments.

1. Les valeurs principales de position

static

Valeur par défaut

  • L’élément suit le flux normal du document.
  • Les propriétés top, right, bottom, left n’ont aucun effet.
p {
  position: static;
}

relative

L’élément reste dans le flux normal, mais peut être déplacé par rapport à sa position initiale.

  • Les propriétés top, left, right, bottom déplacent l’élément sans affecter les autres.
div {
  position: relative;
  top: 10px;
  left: 20px;
}

absolute

L’élément est retiré du flux normal.

  • Il est positionné par rapport à son premier ancêtre positionné (c’est-à-dire un parent avec une valeur position différent de static).
  • Les autres éléments se comportent comme si l’élément n’existait pas.
.box {
  position: absolute;
  top: 50px;
  right: 10px;
}

Très utilisé pour les menus, bulles d’information, légendes sur images.

fixed

Semblable à absolute, mais l’élément est fixé par rapport à la fenêtre du navigateur (viewport).

  • Il reste visible même lors du défilement.
nav {
  position: fixed;
  top: 0;
  left: 0;
}

Exemple courant : une barre de navigation fixe en haut de page.

sticky

Combinaison entre relative et fixed.

  • L’élément suit le flux normal jusqu’à ce qu’un seuil soit atteint (ex. top: 0;), puis il devient fixe.
  • Dépend du contenant parent.
header {
  position: sticky;
  top: 0;
}

Exemple courant : un en-tête qui reste collé en haut lors du défilement.

2. Les propriétés de décalage

  • top, right, bottom, left servent à définir la position exacte de l’élément selon son contexte.
  • Elles n’agissent que si la valeur de position est différent de static.

Exemple :

img {
  position: absolute;
  top: 100px;
  left: 50px;
}

3. La superposition avec z-index

  • La propriété z-index définit l’ordre d’empilement (superposition) des éléments positionnés.
  • Plus la valeur est grande, plus l’élément est au-dessus.
.card {
  position: absolute;
  z-index: 10;
}

4. Résumé des différences

Valeur Flux normal respecté ? Exemples d’usage
static ✅ Oui Texte, blocs par défaut
relative ✅ Oui Ajustement fin, ancre pour absolute
absolute ❌ Non Boîtes flottantes, overlays
fixed ❌ Non Menus fixes, boutons flottants
sticky ✅ Oui (partiellement) En-têtes, colonnes collantes

Mediagraphie

Aidé de l'intelligence artificielle

J’ai utilisé l’outil d’intelligence artificielle ChatGPT, GPT-5.6 Luna afin de résumer les valeurs de la propriété position.

Plus précisément, j’ai demandé à l’outil d’accomplir les tâches suivantes :

  • Créer un tableau en markdown
  • Y résumer les différentes valeurs de position et les comparer entre elles