Thuộc tính zIndex của Style

Định nghĩa và cách sử dụng

zIndex Thuộc tính đặt hoặc trả về thứ tự sắp xếp của phần tử định vị.

phần tử có thứ tự sắp xếp lớn hơn (1) luôn nằm trước phần tử có thứ tự sắp xếp thấp hơn (0).

Lưu ý:Phần tử định vị là Thuộc tính vị trí đặt thành:relative,absolute hoặc fixed của phần tử.

Lưu ý:Thuộc tính này rất hữu ích nếu muốn tạo các phần tử chồng lên nhau.

Xem thêm:

Giáo trình CSS:Định vị CSS

Hướng dẫn CSS:Thuộc tính zIndex

Mô hình

Ví dụ 1

Thay đổi thứ tự sắp xếp của phần tử <img>:

document.getElementById("img1").style.zIndex = "1";

Thử ngay

Ví dụ 2

Thay đổi giá trị thuộc tính z-index của phần tử <div>:

document.getElementById("myDIV").style.zIndex = "-1";

Thử ngay

Ví dụ 3

Trả về giá trị thuộc tính z-index của phần tử <img>:

alert(document.getElementById("img1").style.zIndex);

Thử ngay

Cú pháp

Trả về thuộc tính zIndex:

object.style.zIndex

Đặt thuộc tính zIndex:

object.style.zIndex = "auto|number|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
auto Trình duyệt xác định thứ tự sắp xếp của phần tử (dựa trên vị trí trong tài liệu). Mặc định.
number Số nguyên định nghĩa thứ tự sắp xếp của phần tử. Cho phép giá trị âm.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Giá trị trả về: Chuỗi, biểu thị thứ tự sắp xếp của phần tử.
Phiên bản CSS: CSS2

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ