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

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

การกำหนดระยะห่างจากตำแหน่งปัจจุบันทำได้โดยคุณสมบัติ top, right, bottom และ left

ตัวอย่าง

ก่อนอื่น เรามาสร้างบล็อกสองบล็อก โดยไม่กำหนดการจัดวางตำแหน่ง:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

ตัวอย่าง

ทีนี้เรามาเพิ่มค่า relative ให้กับบล็อกแรก ขณะนี้ยังไม่มีอะไรเปลี่ยนแปลง เนื่องจาก เรายังไม่ได้กำหนดระยะห่างให้บล็อก:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

ตัวอย่าง

ทีนี้ลองเลื่อนบล็อกของเราลงมา 30px จากด้านบน โดยกำหนดคุณสมบัติ top ให้มัน ในขณะที่องค์ประกอบอื่นๆ จะยังคงประพฤติตัว ราวกับว่าบล็อกของเรายังคงอยู่ที่ตำแหน่งเดิม ตั้งแต่เริ่มต้น:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

ตัวอย่าง

ทีนี้ลองเลื่อนบล็อกของเราไปทางขวา 40px โดยกำหนดคุณสมบัติ left ให้มัน:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

ตัวอย่าง

ค่าลบของคุณสมบัติ top, right, bottom และ left จะทำให้เลื่อนไปในทิศทางตรงกันข้าม ตัวอย่างเช่น ค่าบวกของ top จะเลื่อนลงด้านล่าง ส่วนค่าลบจะเลื่อนขึ้นด้านบน

ลองเลื่อนบล็อกที่สองของเราขึ้นไป 40px โดยกำหนดค่าลบให้กับคุณสมบัติ top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

โจทย์ฝึกปฏิบัติ

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}