Valeurs négatives en positionnement CSS

Les propriétés que nous avons étudiées top, right, bottom et left peuvent prendre non seulement des valeurs positives, mais aussi des valeurs négatives. Regardons quelques exemples.

Exemple

Dans l'exemple suivant, l'élément est positionné de manière absolue par rapport à son parent et se trouve à la position 0 en haut, 0 à gauche :

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Exemple

Et maintenant, déplaçons l'élément à la position -20px en haut, -30px à gauche :

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: