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:
<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;
}
:
Misol
Endi esa keling, elementni -20px tepada,
-30px chapda joylashganiga siljitaylik:
<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;
}
:
Quyidagi namunada yashil blok margin yordamida
ekran markazida joylashgan, va
qizil bloklar unga nisbatan pozitsiyalanadi.
Ko'rsatilgan namuna asosida sahifani takrorlang:
