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

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

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

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

#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:

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

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

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

กำหนดให้มีบล็อกต่อไปนี้:

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

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

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