คุณสมบัติ left

คุณสมบัติ left กำหนด ตำแหน่งของขอบด้านซ้ายขององค์ประกอบ ค่าสำหรับคุณสมบัติสามารถ ระบุด้วยหน่วยวัดขนาดที่ใช้กันทั่วไป เช่น พิกเซล นิ้ว พอยต์ หรือเปอร์เซ็นต์ ค่าที่กำหนดอาจเป็นตัวเลขติดลบก็ได้ ในกรณีนี้ องค์ประกอบจะซ้อนทับกัน การนับพิกัดถูกกำหนดโดยคุณสมบัติ position ซึ่งโดยปกติรับค่า relative (ตำแหน่งสัมพัทธ์) หรือ absolute (ตำแหน่งสัมบูรณ์)

ไวยากรณ์

selector {
	left: size หรือ auto;
}

ตัวอย่าง

มาให้เมื่อชี้ไปที่องค์ประกอบลูก ตั้งค่าตำแหน่งขอบซ้ายของมัน ให้เท่ากับ 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-left: 50px;
}
p:hover {
	left: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ตัวอย่าง

และตอนนี้ให้เมื่อชี้ไป ขอบซ้ายของ องค์ประกอบลูกจะอยู่ที่ตำแหน่ง -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-left: 50px;
}
p:hover {
	left: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ดูเพิ่มเติม

คุณสมบัติ bottom,
ซึ่งกำหนดตำแหน่งขอบด้านล่างขององค์ประกอบ
คุณสมบัติ top,
ซึ่งกำหนดตำแหน่งขอบด้านบนขององค์ประกอบ
คุณสมบัติ right,
ซึ่งกำหนดตำแหน่งขอบด้านขวาขององค์ประกอบ
pseudoelement ::backdrop,
ซึ่งกำหนดตำแหน่งหลังองค์ประกอบแรก