Top xususiyati
top xususiyati elementning yuqori chetining
ota elementning yuqori chetidan joylashishini belgilaydi.
Xususiyat qiymatlarini o'lchov birliklari bilan
belgilash mumkin, masalan, piksellar, dyuymlar, punktlar, foizlar.
Belgilangan qiymatlar manfiy sonlar ham bo'lishi mumkin,
bu holda elementlar bir-birining ustiga qo'yiladi.
Koordinatalarning hisoblashi position
xususiyati bilan belgilanadi,
bu odatda relative
(nisbiy joylashuv) yoki absolute
(absolyut joylashuv) qiymatlarini qabul qiladi.
Sintaksis
selektor {
top: o'lcham yoki auto;
}
Misol
Keling, bola elementga sichqoncha olib borilganda
uning yuqori chekasi joylashishini
25px ga o'rnataylik:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 50px;
margin-left: 50px;
}
p:hover {
top: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Misol
Endi esa sichqoncha olib borilganda bola elementning
yuqori chekasi joylashishi
-50px da bo'lsin:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
margin-top: 50px;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
top: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Shuningdek qarang
-
bottomxususiyati,
bu elementning pastki chetining joylashishini belgilaydi -
leftxususiyati,
bu elementning chap chetining joylashishini belgilaydi -
rightxususiyati,
bu elementning o'ng chetining joylashishini belgilaydi -
::backdroppsevdoelementi,
bu birinchi elementdan keyingi joylashishni belgilaydi -
caption-sidexususiyati,
bu jadval sarlavhasining joylashishini belgilaydi