ค่าลบในการจัดตำแหน่งด้วย CSS

คุณสมบัติที่เราเรียนรู้มาแล้วอย่าง top, right, bottom และ left สามารถรับได้ ไม่เพียงแต่ค่าบวก แต่ยังรวมถึงค่าลบ ด้วย มาดูตัวอย่างกัน

ตัวอย่าง

ในตัวอย่างต่อไปนี้ องค์ประกอบถูกจัดตำแหน่งแบบสัมบูรณ์ เทียบกับผู้ปกครองของมัน และอยู่ที่ตำแหน่ง 0 จากด้านบน, 0 จากด้านซ้าย:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ตัวอย่าง

ทีนี้ลองย้ายองค์ประกอบไปที่ตำแหน่ง -20px จากด้านบน, -30px จากด้านซ้าย:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: -20px;
	left: -30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ในตัวอย่างถัดไป บล็อกสีเขียวอยู่ตรง กลางหน้าจอโดยใช้ margin และ บล็อกสีแดงถูกจัดตำแหน่งสัมพัทธ์กับ มัน ทำหน้าเว็บตาม ตัวอย่างที่ให้มา: