უარყოფითი მნიშვნელობები პოზიციონირებაში CSS-ში
ჩვენს მიერ შესწავლილ თვისებებს top, right,
bottom და left შეუძლიათ მიიღონ
არა მხოლოდ დადებითი, არამედ უარყოფითი
მნიშვნელობებიც. მოდით შევხედოთ მაგალითებს.
მაგალითი
შემდეგ მაგალითში ელემენტი პოზიციონირდება აბსოლუტურად
თავის მშობელთან მიმართებათ და დგას პოზიციაში
0 ზემოდან, 0 მარცხნიდან:
<div id="parent">
<div id="child"></div>
</div>
#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 მარცხნიდან:
<div id="parent">
<div id="child"></div>
</div>
#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;
}
:
შემდეგ ნიმუშში მწვანე ბლოკი დგას
ეკრანის ცენტრში margin-ის საშუალებით, ხოლო
წითელი ბლოკები პოზიციონირდება მასთან
მიმართებაში. გაიმეორეთ გვერდი
მოცემული ნიმუშის მიხედვით:
