Maîtriser le positionnement CSS : Relatif, Absolu et Fixe

La propriété CSS position contrôle la manière dont un élément est positionné dans le document. Voici les valeurs principales :

  • absolute : L'élément est positionné par rapport au premier ancêtre positionné non-static.
  • relative : L'élément est positionné par rapport à sa position normale dans le flux du document.
  • fixed : L'élément est positionné par rapport à la fenêtre du navigateur.
  • static : Valeur par défaut. L'élément suit le flux normal du document.
  • inherit : La valeur de la propriété position est héritée de l'élément parenet.
  1. Positionnement relatif (relative)

Avec le positionnement relatif, un élément est déplacé par rapport à sa position d'origine dans le flux normal. Les autres éléments du flux continuent de se comporter comme si l'élément déplacé était toujours à sa place d'origine. Cela signifie que le déplacement d'un élément relatif ne modifie pas la poistion des autres éléments.

Exemple : Déplacement d'un élément parent

Dans cet exemple, le conteneur parent est décalé de 100px vers le bas et de 100px vers la droite par rapport à sa position normale.


 <view class='conteneur'>
   <view class='fils-a'>Fils A</view>
   <view class='fils-b'>Fils B</view>
 </view>
 


 .conteneur {
   background-color: yellow;
   width: 300px;
   height: 300px;
   margin-top: 100px;
   margin-left: 100px;
   position: relative; /* Décalage par rapport à sa position normale */
 }

Exemple : Déplacement d'éléments enfants

Ici, chaque enfant est décalé par rapport à sa propre position normale. L'espace initialemant occupé par ces éléments reste réservé dans le flux du document.


 .fils-a {
   background-color: red;
   width: 100px;
   height: 100px;
   position: relative;
   top: 100px;  /* Décalé de 100px vers le bas par rapport à sa position initiale */
   right: 100px; /* Décalé de 100px vers la gauche (car positif 'right' décale vers la gauche) par rapport à sa position initiale */
 }
 .fils-b {
   background-color: blue;
   width: 100px;
   height: 100px;
   position: relative;
   top: 20px;   /* Décalé de 20px vers le bas */
   left: 20px;  /* Décalé de 20px vers la droite */
 }
  1. Positionnement absolu (absolute)

Un élément à positionnement absolu est retiré du flux normal du document. Il n'occupe donc plus d'espace, et les autres éléments se comportent comme s'il n'existait pas. Sa position est définie par rapport à son ancêtre le plus proche ayant une propriété position autre que static. Si aucun ancêtre n'est positionné, il est positionné par rapport au bloc de initialisation (généralement <html> ou <body>).

Comportement et superposition

Lorsque le premier fils passe en absolute, le second fils se repositionne comme s'il était le premier élément du conteneur. L'élément absolument positionné peut recouvrir d'autres éléments. La propriété z-index permet de contrôler l'ordre de superposition.


 .fils-a {
   background-color: red;
   width: 100px;
   height: 100px;
   position: absolute; /* Positionné par rapport au conteneur, retiré du flux */
 }
 .fils-b {
   background-color: blue;
   width: 100px;
   height: 100px;
   /* Sans position, il se comporterait comme s'il était le premier enfant */
 }

Contrôle de la superposition

Si le second fils est également positionné (absolu ou relatif), il prendra une position définie et pourra se superposer. L'ordre final dépendra de l'ordre dans le HTML et des valeurs z-index.


 .fils-a {
   background-color: red;
   width: 100px;
   height: 100px;
   position: absolute;
   z-index: 1; /* Sera en dessous si z-index plus bas */
 }
 .fils-b {
   background-color: blue;
   width: 100px;
   height: 100px;
   position: absolute;
   z-index: 2; /* Sera au-dessus si z-index plus élevé */
 }

Utilisation combinée (absolute et relative)

On peut positionner un élément absolument et utiliser relative sur un autre pour le décaler par rapport à cet élément.


 .fils-a {
   background-color: red;
   width: 100px;
   height: 100px;
   position: absolute;
 }
 .fils-b {
   background-color: blue;
   width: 100px;
   height: 100px;
   position: relative;
   top: 100px; /* Décalé par rapport à sa position normale (qui est après fils-a) */
   left: 100px;
 }
  1. Positionnement fixe (fixed)

Un élément avec position: fixed est positionné par rapport à la fenêtre du navigateur. Il reste à cet endroit même lorsque la page est défilée. Comme pour absolute, il est retiré du flux normal.


 .fils-a {
   background-color: red;
   width: 100px;
   height: 100px;
   position: fixed;
   top: 10px;  /* 10px depuis le haut de la fenêtre */
   left: 10px; /* 10px depuis la gauche de la fenêtre */
 }
 .fils-b {
   background-color: blue;
   width: 100px;
   height: 100px;
   position: relative; /* Comportement normal, non affecté par le fixe */
   top: 100px;
   left: 100px;
 }

En résumé, le positionnement relative modifie la position d'un élément tout en conservant son espace dans le flux. Le positionnement absolute retire l'élément du flux et le positionne par rapport à un ancêtre positionné ou au document. Le positionnement fixed est similaire à absolute mais le positionnement est toujours relatif à la fenêtre du navigateur.

Étiquettes: CSS position relative absolute fixed

Publié le 20 juin à 17h45

Étiquettes Populaires

©2026 L'Atelier Monstre