Valori negative în poziționarea CSS

Proprietățile pe care le-am studiat top, right, bottom și left pot lua nu numai valori pozitive, ci și negative. Să analizăm câteva exemple.

Exemplul

În exemplul următor, elementul este poziționat absolut față de părintele său și se află în poziția 0 de sus, 0 din stânga:

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

Результат:

Exemplul

Acum să mutăm elementul în poziția -20px de sus, -30px din stânga:

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

Результат: