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

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

เพื่อทำให้องค์ประกอบถูกจัดวางตำแหน่งแบบสัมบูรณ์ จำเป็นต้องกำหนดคุณสมบัติ position ให้กับองค์ประกอบนี้ ด้วยค่า absolute นอกจากคุณสมบัตินี้แล้ว ยังต้องการ อีกสองคุณสมบัติ: อันหนึ่งจะกำหนดพิกัดตามแนวตั้ง และอีกอันหนึ่ง - ตามแนวนอน

สำหรับแนวตั้ง ต้องกำหนดระยะห่างจากด้านบน หรือจากด้านล่าง ระยะห่างจากด้านบนกำหนดโดยคุณสมบัติ top และระยะห่างจากด้านล่าง - โดยคุณสมบัติ bottom สำหรับแนวนอน ต้องกำหนดระยะห่างจากด้านซ้าย หรือจากด้านขวา ระยะห่างจากด้านซ้ายกำหนดโดยคุณสมบัติ left และระยะห่างจากด้านขวา - โดยคุณสมบัติ right

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

ตัวอย่าง

เริ่มต้น มาสร้างสองบล็อก โดยไม่มีการจัดวางตำแหน่ง (โปรดสังเกต ว่าองค์ประกอบไม่ได้ชิดขอบหน้าต่าง เนื่องจาก body มี margin ตามค่าเริ่มต้น):

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

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

ตัวอย่าง

ตอนนี้ มาทำให้บล็อกสีเขียวมีการจัดวางตำแหน่งแบบสัมบูรณ์ โดยวางไว้ที่ตำแหน่ง จากด้านบน 150px และจากด้านซ้าย 100px:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านบนและ 0px จากด้านซ้าย:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านบนและ 0px จากด้านขวา:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านล่างและ 0px จากด้านขวา:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านล่างและ 0px จากด้านซ้าย:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

แบบฝึกหัดปฏิบัติ

ใช้การจัดวางตำแหน่งแบบสัมบูรณ์เพื่อจัดวางบล็อกต่างๆ ดังนี้: