Properti bottom

Properti bottom mengatur posisi tepi bawah elemen. Nilai untuk properti dapat ditulis dengan unit ukuran yang umum digunakan, contohnya, dalam piksel, inci, poin, persentase. 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 {
	bottom: angka dengan unit pengukuran atau auto;
}

Contoh

Mari saat hover pada elemen anak atur posisi tepi bawahnya 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;
}
p:hover {
	bottom: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Contoh

Sekarang mari saat hover, tepi bawah elemen anak diposisikan pada -50px:

<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;
}
p:hover {
	bottom: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Lihat juga

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