CSSда позиционлашда манфий қийматлар

Биз ўрганган top, right, bottom ва left хусусиятлари фақат мусбат эмас, балки манфий қийматларни ҳам қабул қилиши мумкин. Келиб, мисолларда кўрамиз.

Мисол

Қуйидаги мисолда элемент ўта родителига нисбатан абсолют позиционланади ва 0 юқоридан, 0 чапдан жойлашади:

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

Результат:

Мисол

Энди эса, элементни -20px юқоридан, -30px чапдан жойга кўчамиз:

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

Результат: