การจัดตำแหน่งแบบสัมบูรณ์โดยไม่ใช้พิกัดใน CSS

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

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

ตัวอย่าง

เริ่มต้น ลองสร้างบล็อกสามบล็อก โดยไม่มีการกำหนดตำแหน่ง และมี ข้อความบางส่วนระหว่างบล็อก:

<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

ตัวอย่าง

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

<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

ตัวอย่าง

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

<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* เพิ่มตำแหน่งแนวนอน */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

ตัวอย่าง

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

<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* เพิ่มตำแหน่งแนวตั้ง */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}