Properti top

Properti top mengatur posisi tepi atas elemen dari atas elemen induk. Nilai untuk properti dapat ditulis dengan satuan ukuran yang umum, misalnya, dalam piksel, inci, poin, persen. Nilai yang ditetapkan juga dapat berupa angka negatif, dalam hal ini elemen akan saling tumpang tindih. Perhitungan koordinat ditentukan oleh properti position, yang biasanya mengambil nilai relative (posisi relatif) atau absolute (posisi absolut).

Sintaks

selektor {
	top: ukuran atau auto;
}

Contoh

Mari saat mengarahkan kursor ke elemen anak atur posisi batas atasnya menjadi 25px:

<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 saat mengarahkan kursor, batas atas elemen anak akan ditempatkan pada -50px:

<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

properti bottom,
yang mengatur posisi tepi bawah elemen
properti left,
yang mengatur posisi tepi kiri elemen
properti right,
yang mengatur posisi tepi kanan elemen
pseudoelemen ::backdrop,
yang mengatur penempatan setelah elemen pertama
properti caption-side,
yang mengatur posisi judul tabel