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

bottom xususiyati,
bu elementning pastki chetining joylashishini belgilaydi
left xususiyati,
bu elementning chap chetining joylashishini belgilaydi
right xususiyati,
bu elementning o'ng chetining joylashishini belgilaydi
::backdrop psevdoelementi,
bu birinchi elementdan keyingi joylashishni belgilaydi
caption-side xususiyati,
bu jadval sarlavhasining joylashishini belgilaydi