Khi layout CSS, ta định vị phần tử trái/phải, trên/dưới. z-index cho phép sắp xếp trên trục Z (độ sâu), tạo hiệu ứng chồng lớp (stacking).
Cú pháp
z-index: auto; /* Mặc định */ z-index: -1; /* Số âm: dưới hơn */ z-index: 9999; /* Số dương lớn: trên hơn */
Điều kiện bắt buộc: Phần tử phải có position là relative, absolute, hoặc fixed. Nếu không, z-index không tác dụng (tương đương auto).
Ví dụ: Stacking Guinea Pigs (Con Cavy)
Hai con Cavy: Cuy#1 đặt trên hồ nước, Cuy#2 đặt trên ly cà phê.
Bước 1: Định vị ảnh Cuy#1:
img.cuy.one { position: absolute; }
Ảnh biến mất khỏi luồng, cần z-index để đưa lên trên hồ:
img.cuy.one { position: absolute; z-index: 1; }
Bước 2: Cuy#2 cùng cơ chế:
img.cuy.two { position: absolute; width: 160px; padding: 100px; z-index: 1; }
Kết quả: Cả hai con Cavy hiển thị đè lên hình nền hồ nước và ly cà phê tương ứng.
Lưu ý quan trọng
- Luôn set
position(relative/absolute/fixed) cho phần tử dùng z-index. - Áp dụng z-index cho các phần tử anh em (siblings). Nếu lồng nhau sâu (nested), z-index có thể không hoạt động như mong đợi do stacking context riêng biệt.
Kết luận
z-index mở ra ý tưởng layout thú vị (modal, tooltip, chat popup). Nhớ: position + z-index trên siblings. Thử xóa position trong code demo để thấy tác động.