უარყოფითი მნიშვნელობები პოზიციონირებაში 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;
}

Результат: