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

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

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

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

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

Результат: