Thuộc tính style.zIndex trong HTML DOM kiểm soát thứ tự chồng lớp (stacking order) của các phần tử được định vị (position khác static). Phần tử có z-index lớn hơn hiển thị đè lên phần tử nhỏ hơn.
Cú pháp
Lấy giá trị zIndex
object.style.zIndex
Thiết lập giá trị zIndex
object.style.zIndex = "giá_trị"
Các giá trị hợp lệ
| Giá trị | Mô tả |
|---|---|
| initial | Đặt về mặc định (auto). |
| inherit | Kế thừa từ phần tử cha. |
| auto | Thứ tự chồng theo thứ tự xuất hiện trong HTML (mặc định). |
| số nguyên | Chỉ định thứ tự chồng lớp (ví dụ: 1, 9999, -1). Số lớn hơn hiển thị trên top. |
Ví dụ minh họa
Đổi thứ tự chồng của hai hộp màu (đỏ và xanh) bằng zIndex:
<!DOCTYPE html>
<html>
<head>
<style>
body { color: #000; height: 100vh; }
.box1 { width: 100px; height: 100px; background: lightcoral; position: relative; top: 50px; }
.box2 { width: 100px; height: 100px; background: lightgreen; position: relative; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính zIndex</h1>
<div class='box1'></div>
<div class='box2'></div>
<button onclick="add()" class="btn">Thay đổi zIndex</button>
<script>
function add() {
document.querySelector('.box1').style.zIndex = "1";
}
</script>
</body>
</html>
Kết quả
Ban đầu hộp xanh (box2) đè lên hộp đỏ (box1) do xuất hiện sau trong HTML. Sau khi nhấn nút đặt zIndex = 1 cho box1, hộp đỏ hiển thị đè lên hộp xanh.