Thuộc tính bottom

Thuộc tính bottom thiết lập vị trí cạnh dưới của phần tử. Các giá trị cho thuộc tính có thể được ghi với các đơn vị kích thước thông thường, ví dụ: pixel, inch, point, phần trăm. Các giá trị được đặt cũng có thể là số âm, trong trường hợp này các phần tử sẽ chồng lên nhau. Việc tính toán tọa độ được xác định bởi thuộc tính position, thường nhận giá trị relative (vị trí tương đối) hoặc absolute (vị trí tuyệt đối).

Cú pháp

bộ chọn {
	bottom: số với đơn vị đo hoặc auto;
}

Ví dụ

Hãy thiết lập vị trí cạnh dưới của phần tử con bằng 25px khi di chuột qua nó:

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

Ví dụ

Và bây giờ hãy để cạnh dưới của phần tử con được đặt ở vị trí -50px khi di chuột qua:

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

Xem thêm

thuộc tính top,
thiết lập vị trí cạnh trên của phần tử
thuộc tính left,
thiết lập vị trí cạnh trái của phần tử
thuộc tính right,
thiết lập vị trí cạnh phải của phần tử
phần tử giả ::backdrop,
thiết lập vị trí sau phần tử đầu tiên
thuộc tính caption-side,
thiết lập vị trí tiêu đề bảng