Thuộc tính left

Thuộc tính left thiết lập vị trí cạnh trái của phần tử. Các giá trị cho thuộc tính có thể được viết 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 thiết lập 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. Cách tính 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 {
	left: kích thước hoặc auto;
}

Ví dụ

Hãy thiết lập vị trí cạnh trá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-left: 50px;
}
p:hover {
	left: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Ví dụ

Và bây giờ hãy để cạnh trái 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;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	left: -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 top,
thiết lập vị trí cạnh trên 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