รายละเอียดการใช้งานค่า z-index เป็นลบใน CSS

หากไม่ได้กำหนด z-index ให้กับองค์ประกอบ ให้ตีความค่าของมันเป็น 0 นั่นหมายความว่าองค์ประกอบที่มีค่า z-index เท่ากับ -1 จะอยู่ต่ำกว่าองค์ประกอบที่ไม่มี z-index

เราสามารถปรับตัวอย่างขององค์ประกอบทั้งสองของเรา ได้ดังนี้: แค่กำหนด z-index ให้กับองค์ประกอบที่สอง เป็นค่า -1 และมันจะอยู่ใต้องค์ประกอบแรก:

css#elem1 {
  /* ไม่ได้กำหนด z-index */
}
#elem2 {
  z-index: -1;
}

ผลลัพธ์จากการรันโค้ด: