Positionnement en CSS

Simon Moisselin -

Introduction au positionnement en CSS

Le positionnement en CSS constitue une fonctionnalité essentielle qui offre aux concepteurs et développeurs une variété d'options pour organiser les éléments HTML sur une page web. En jouant sur les propriétés de positionnement, vous pouvez placer les éléments exactement là où vous le souhaitez.

Les types de positionnement

En CSS, la propriété de position peut être définie selon différents types: static, relative, absolute, fixed et sticky. Chacun de ces types de positionnement a des caractéristiques uniques :

  • Static : C'est la valeur par défaut. Les éléments sont positionnés selon le flux normal du document, ce qui signifie qu'ils apparaissent dans l'ordre où ils apparaissent dans le code HTML.
  • Relative : Cela permet de déplacer un élément par rapport à sa position d'origine. En utilisant les propriétés comme top, right, bottom, left, vous déplacez l'élément sans perturber le flux normal.
  • Absolute : Cet mode positionne un élément par rapport à son ancêtre le plus proche qui a un positionnement autre que static. S'il n'y a pas d'ancêtre positionné, il sera positionné par rapport à l'élément <html>.
  • Fixed : Les éléments avec cette valeur sont positionnés par rapport à la fenêtre du navigateur et restent toujours à l'endroit spécifié, même lorsqu'on fait défiler la page.
  • Sticky : Cela mêle les propriétés de relative et fixed. Un élément commence en tant qu’élément relatif et peut devenir fixe lorsque vous faites défiler la page.

La propriété z-index

La propriété z-index détermine l'ordre d'empilement des éléments lorsque ceux-ci se chevauchent. Plus la valeur du z-index est élevée, plus l'élément sera visible au-dessus des autres.

Exemples de code

Voici quelques exemples de code illustrant ces concepts :

/* Exemple de positionnement relatif */
.relative {
    position: relative;
    top: 10px;  /* Déplace 10 pixels vers le bas */
    left: 20px; /* Déplace 20 pixels vers la droite */
}

/* Exemple de positionnement absolu */
.absolute {
    position: absolute;
    top: 50px;
    right: 50px;
}

/* Exemple de positionnement fixe */
.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
}

/* Exemple de positionnement sticky */
.sticky {
    position: sticky;
    top: 0;
}