CSS Z-Index: Chồng chéo phần tử

Sử dụng thuộc tính CSS z-index, lập trình viên có thể xếp chồng các phần tử lên nhau. Z-index có thể mang giá trị dương hoặc âm.

LƯU Ý: Nếu các phần tử chồng chéo không có z-index được chỉ định, phần tử xuất hiện sau trong tài liệu (document order) sẽ hiển thị trên cùng.

Cú pháp

selector {
    position: relative | absolute | fixed | sticky; /* bắt buộc không phải static */
    z-index: /* integer */;
}

Quan trọng: z-index chỉ hoạt động trên các phần tử có position khác static (mặc định).

Cơ chế Stacking Context

Mỗi phần tử có position và z-index (không phải auto) tạo ra một Stacking Context mới. Các phần tử con chỉ so sánh z-index trong cùng context, không thể "vượt ra" context cha.

Ví dụ 1: Z-index âm và dương

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 0;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* trên cùng */
    font-size: 1.2rem;
    padding: 20px;
    background: rgba(255,255,255,0.9);
}
div {
    margin: auto;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
div:first-child {
    background-color: orange;
    width: 270px; height: 120px;
    z-index: -2; /* dưới cùng */
}
div:last-child {
    width: 250px; height: 100px;
    z-index: -1; /* giữa */
    background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>Fortran được phát triển bởi đội ngũ IBM năm 1957 cho tính toán khoa học...</p>
<div></div>
</body>
</html>

Thứ tự hiển thị (từ dưới lên): div cam (z-index: -2) → div ngọc (z-index: -1) → p text (z-index: 10).

Ví dụ 2: Background image (không liên quan z-index)

Ví dụ thứ hai trong bài gốc chỉ demo background-image, không minh họa z-index. Bỏ qua.

Các giá trị z-index thực tế

Best Practice

• Định nghĩa z-index scale trong design system (CSS custom properties)
• Tránh dùng z-index: 9999 tùy tiện
• Hiểu Stacking Context để debug z-index không hoạt động
• isolation: isolate tạo stacking context mới cho parent