Sifat top

Sifat top menentukan kedudukan bahagian atas elemen dari bahagian atas elemen induk. Nilai untuk sifat ini boleh ditulis dengan unit ukuran yang lazim, contohnya, dalam piksel, inci, mata, peratusan. Nilai yang ditetapkan juga boleh menjadi nombor negatif, dalam kes ini elemen akan bertindih antara satu sama lain. Pengiraan koordinat ditentukan oleh sifat position, yang biasanya mengambil nilai relative (kedudukan relatif) atau absolute (kedudukan mutlak).

Sintaks

selector {
	top: saiz atau auto;
}

Contoh

Mari kita tetapkan kedudukan bahagian atas elemen anak kepada 25px apabila kursor dilalukan ke atasnya:

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

Contoh

Sekarang, mari kita tetapkan bahagian atas elemen anak pada kedudukan -50px apabila kursor dilalukan:

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

Lihat juga

sifat bottom,
yang menentukan kedudukan bahagian bawah elemen
sifat left,
yang menentukan kedudukan bahagian kiri elemen
sifat right,
yang menentukan kedudukan bahagian kanan elemen
unsur pseudo ::backdrop,
yang menentukan kedudukan selepas elemen pertama
sifat caption-side,
yang menentukan kedudukan tajuk jadual