Negatiewe waardes vir posisionering in CSS

Die eienskappe top, right, bottom en left wat ons bestudeer het, kan nie slegs positiewe nie, maar ook negatiewe waardes aanneem. Kom ons kyk na voorbeelde.

Voorbeeld

In die volgende voorbeeld word die element absoluut geposisioneer relatief tot sy ouer en staan op die posisie 0 van bo, 0 van 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

En nou, laat ons die element skuif na die posisie -20px van bo, -30px van 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;
}

Результат: