Vlerat negative në pozicionim në CSS

Vetitë që kemi mësuar top, right, bottom dhe left mund të marrin jo vetëm vlera pozitive, por edhe negative. Le t'i shohim me shembuj.

Shembull

Në shembullin e mëposhtëm, elementi pozicionohet absolutisht në lidhje me prindin e tij dhe ndodhet në pozicion 0 nga lart, 0 nga e majta:

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

Результат:

Shembull

Tani le ta lëvizim elementin në pozicion -20px nga lart, -30px nga e majta:

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

Результат: