Thuộc tính top

Thuộc tính top xác định vị trí cạnh trên của phần tử so với cạnh trên của phần tử cha. Giá trị cho thuộc tính có thể được viết với các đơn vị kích thước phổ biến, ví dụ: pixel, inch, point, phần trăm. 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 {
	top: kích thước hoặc auto;
}

Ví dụ

Hãy thiết lập vị trí cạnh trên bằng 25px cho phần tử con 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;
	margin-left: 50px;
}
p:hover {
	top: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Ví dụ

Bây giờ hãy để cạnh trên của phần tử con nằm ở 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;
	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;
}

Xem thêm

thuộc tính bottom,
thiết lập vị trí cạnh dưới 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