Negatiiviset arvot asemointia CSS:ssä

Oppimamme ominaisuudet top, right, bottom ja left voivat ottaa ei vain positiivisia, vaan myös negatiivisia arvoja. Katsotaanpa esimerkein.

Esimerkki

Seuraavassa esimerkissä elementti asemoidaan absoluuttisesti suhteessa sen vanhempaan ja on asemassa 0 ylhäältä, 0 vasemmalta:

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

Результат:

Esimerkki

Ja nyt siirretään elementti asemaan -20px ylhäältä, -30px vasemmalta:

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

Результат: