Nilai Negatif dalam Positioning di CSS

Properti yang telah kita pelajari top, right, bottom dan left dapat menerima tidak hanya nilai positif, tetapi juga nilai negatif. Mari kita lihat contohnya.

Contoh

Pada contoh berikut, elemen diposisikan secara absolut terhadap induknya dan berada di posisi 0 dari atas, 0 dari kiri:

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

Результат:

Contoh

Sekarang mari kita pindahkan elemen ke posisi -20px dari atas, -30px dari kiri:

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

Результат: