การจัดตำแหน่งสัมพัทธ์กับผู้ปกครองแบบ Absolute ใน CSS

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

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

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

#parent {
	position: absolute;
	top: 100px;
	left: 200px;
	
	width: 500px;
	height: 300px;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

สร้างบล็อกสี่เหลี่ยมจัตุรัสแบบ absolute ขนาด 400px ภายในบล็อกนั้น สร้างบล็อกอีกสองบล็อกขนาด 50px จัดวางบล็อกแรกที่มุมขวาบน ของผู้ปกครอง และบล็อกที่สอง - ที่มุมซ้ายล่าง ของผู้ปกครอง