Negatīvās vērtības pozicionēšanā CSS

Izpētītās īpašības top, right, bottom un left var pieņemt ne tikai pozitīvas, bet arī negatīvas vērtības. Apskatīsim to ar piemēriem.

Piemērs

Nākamajā piemērā elements tiek absolūti pozicionēts attiecībā pret savu vecāku un atrodas pozīcijā 0 no augšas, 0 no kreisās puses:

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

Результат:

Piemērs

Tagad pārvietosim elementu uz pozīciju -20px no augšas, -30px no kreisās puses:

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

Результат: