Negatieve waarden bij positioneren in CSS

De door ons bestudeerde eigenschappen top, right, bottom en left kunnen niet alleen positieve, maar ook negatieve waarden aannemen. Laten we eens kijken naar voorbeelden.

Voorbeeld

In het volgende voorbeeld wordt het element absoluut gepositioneerd ten opzichte van zijn ouder en staat het in de positie 0 vanaf de bovenkant, 0 vanaf links:

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;
}

Результат:

Voorbeeld

Laten we het element nu verplaatsen naar de positie -20px vanaf de bovenkant, -30px vanaf links:

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;
}

Результат: