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

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

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

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

css#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;
}

Результат: