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

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

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

มาดูตัวอย่างกัน

ตัวอย่าง

เริ่มต้น ลองสร้างบล็อกผู้ปกครองและบล็อกลูกโดยไม่มีการจัดตำแหน่ง:

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

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

ทีนี้ให้ระบุ relative ให้กับผู้ปกครอง ในกรณีนี้ องค์ประกอบลูกจะถูกจัดตำแหน่งสัมพัทธ์กับผู้ปกครองของมัน:

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

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

Результат:

งานฝึกปฏิบัติ

ในงานต่อไปนี้ บล็อกหลักอยู่กึ่งกลางโดยใช้ margin ที่มีค่าเป็น auto และบล็อกอื่นๆ ถูกจัดตำแหน่งสัมพัทธ์กับมันโดยใช้ คุณสมบัติ position