CSSda pozitsiyalashda salbiy qiymatlar

Biz o‘rgangan top, right, bottom va left xususiyatlari faqat musbat emas, balki salbiy qiymatlarni ham qabul qilishi mumkin. Keling, misollar orqali ko'ramiz.

Misol

Quyidagi misolda element o'z ota-onasiga nisbatan mutlaqo pozitsiyalanadi va 0 tepada, 0 chapda joylashgan:

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

Результат:

Misol

Endi esa keling, elementni -20px tepada, -30px chapda joylashganiga siljitaylik:

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

Результат: