Top xassəsi

top xassəsi elementin yuxarı kənarının mövqeyini ana elementin yuxarı hissəsindən təyin edir. Xassə üçün dəyərlər ümumi qəbul edilmiş ölçü vahidləri ilə yazıla bilər, məsələn, piksel, düym, punkt, faiz. Təyin edilən dəyərlər mənfi ədədlər də ola bilər, bu halda elementlər bir-birinin üzərinə düşəcək. Koordinatların hesablanması position xassəsi ilə müəyyən edilir, bu da adətən relative (nisbi mövqe) və ya absolute (mütləq mövqe) dəyərini alır.

Sintaksis

selektor {
	top: ölçü və ya auto;
}

Nümunə

Gəlin alt elementin üzərinə gələndə onun yuxarı kənar mövqeyini 25px-ə bərabər təyin edək:

<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;
}

Nümunə

İndi isə alt elementin yuxarı kənarı -50px mövqeyində yerləşsin:

<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;
}

Həmçinin bax

bottom xassəsi,
elementin aşağı kənarının mövqeyini təyin edir
left xassəsi,
elementin sol kənarının mövqeyini təyin edir
right xassəsi,
elementin sağ kənarının mövqeyini təyin edir
pseudoelement ::backdrop,
ilk elementdən sonrakı yerləşməni təyin edir
caption-side xassəsi,
cədvəl başlığının mövqeyini təyin edir