การจัดวางองค์ประกอบตามแนวแกน Z ใน CSS

ในบทเรียนนี้เราจะมาดูเกี่ยวกับการจัดวาง องค์ประกอบตามแนวแกน Z โดยค่าเริ่มต้น หากองค์ประกอบสองอย่าง ซ้อนทับกัน องค์ประกอบที่อยู่ด้านบน จะเป็นองค์ประกอบที่อยู่ล่างกว่า ในโค้ด HTML

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

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

#elem1 {
	position: absolute;
	top: 30px;
	left: 30px;
	
	width: 100px;
	height: 100px;
	background: #ff8888;
}

#elem2 {
	position: absolute;
	top: 60px;
	left: 60px;
	
	width: 100px;
	height: 100px;
	background: #7e89eb;
}