Thuộc tính z-index CSS

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

Thuộc tính zIndex đặt thứ tự sắp xếp của phần tử. Các phần tử có thứ tự sắp xếp cao hơn sẽ luôn nằm trước các phần tử có thứ tự sắp xếp thấp hơn.

Chú ý:Phần tử có thể có giá trị thuộc tính z-index âm.

Chú ý:Z-index chỉ hoạt động trên phần tử định vị (ví dụ: position:absolute;)

Giải thích

Thuộc tính này đặt vị trí của phần tử định vị theo trục z, trục z được định nghĩa là trục thẳng đứng mở rộng vào màn hình. Nếu là số dương, nó gần người dùng hơn, nếu là số âm thì cho thấy xa người dùng hơn.

Xem thêm:

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

Hướng dẫn tham khảo HTML DOM:Thuộc tính zIndex

Ví dụ

Đặt Z-index cho hình ảnh:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Thử ngay

Ngữ pháp CSS

z-index: auto|number|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Mặc định. Thứ tự sắp xếp bằng với phần tử cha.
number Đặt thứ tự sắp xếp của phần tử.
inherit Định nghĩa rằng giá trị của thuộc tính z-index nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: no
Phiên bản: CSS2
Ngữ pháp JavaScript: object.style.zIndex="1"

Các ví dụ khác

Z-index
Z-index có thể được sử dụng để đặt một phần tử sau một phần tử khác.
Z-index
Trong ví dụ trên, phần tử đã thay đổi Z-index.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0