CSS - Positionnement

CSS vous aide à positionner votre élément HTML. Vous pouvez placer n'importe quel élément HTML à l'emplacement de votre choix. Vous pouvez spécifier si vous souhaitez que l'élément soit positionné par rapport à sa position naturelle dans la page ou absolu en fonction de son élément parent.

Maintenant, nous allons voir toutes les propriétés liées au positionnement CSS avec des exemples -

Positionnement relatif

Le positionnement relatif modifie la position de l'élément HTML par rapport à l'endroit où il apparaît normalement. Donc "gauche: 20" ajoute 20 pixels à la position GAUCHE de l'élément.

Vous pouvez utiliser deux valeurs en haut et à gauche avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.

  • Déplacer vers la gauche - Utilisez une valeur négative pour la gauche .
  • Déplacer vers la droite - Utilisez une valeur positive pour la gauche .
  • Monter - Utilisez une valeur négative pour le haut .
  • Descendre - Utilisez une valeur positive pour le haut .

NOTE- Vous pouvez également utiliser les valeurs du bas ou de la droite de la même manière que celles du haut et de la gauche .

Voici l'exemple -

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

Il produira le résultat suivant -

Positionnement absolu

Un élément avec position: absolute est positionné aux coordonnées spécifiées par rapport au coin supérieur gauche de votre écran.

Vous pouvez utiliser deux valeurs en haut et à gauche avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.

  • Déplacer vers la gauche - Utilisez une valeur négative pour la gauche .
  • Déplacer vers la droite - Utilisez une valeur positive pour la gauche .
  • Monter - Utilisez une valeur négative pour le haut .
  • Descendre - Utilisez une valeur positive pour le haut .

NOTE- Vous pouvez également utiliser les valeurs du bas ou de la droite de la même manière que celles du haut et de la gauche.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

Positionnement fixe

Le positionnement fixe vous permet de fixer la position d'un élément à un endroit particulier de la page, quel que soit le défilement. Les coordonnées spécifiées seront relatives à la fenêtre du navigateur.

Vous pouvez utiliser deux valeurs en haut et à gauche avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.

  • Déplacer vers la gauche - Utilisez une valeur négative pour la gauche .
  • Déplacer vers la droite - Utilisez une valeur positive pour la gauche .
  • Monter - Utilisez une valeur négative pour le haut .
  • Descendre - Utilisez une valeur positive pour le haut .

NOTE- Vous pouvez également utiliser les valeurs du bas ou de la droite de la même manière que celles du haut et de la gauche .

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>