CSS'te Konumlandırmada Negatif Değerler

Öğrendiğimiz top, right, bottom ve left özellikleri sadece pozitif değil, aynı zamanda negatif değerler de alabilir. Örneklerle inceleyelim.

Örnek

Aşağıdaki örnekte eleman, ebeveynine göre mutlak konumlandırılmıştır ve üstten 0, soldan 0 pozisyonundadır:

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

Результат:

Örnek

Şimdi ise elemanı üstten -20px, soldan -30px pozisyonuna taşıyalım:

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

Результат: