Thuộc tính z-index

Thuộc tính z-index thiết lập phần tử nào sẽ ở trên cùng trong trường hợp nhiều phần tử chồng lên nhau.

Cú pháp

bộ chọn {
	z-index: số | auto;
}

Số phải là số nguyên, dương hoặc âm. Có thể bằng không.

Giá trị

Giá trị	Mô tả
Số	Số nguyên xác định thứ tự xếp chồng của các phần tử: khi các phần tử chồng lên nhau, phần tử nào có `z-index` lớn hơn sẽ ở trên.
`auto`	Thứ tự xếp chồng được xây dựng tự động: phần tử nào nằm thấp hơn trong mã HTML sẽ ở trên.

Giá trị mặc định: auto.

Ví dụ

Trong ví dụ này, các khối sẽ chồng lên nhau theo thứ tự chúng xuất hiện trong mã HTML (z-index không được đặt và sẽ có giá trị mặc định - auto). Khối đầu tiên sẽ ở dưới cùng (màu đỏ), còn khối cuối cùng - ở trên cùng (màu xanh lá cây):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

Ví dụ

Hãy thay đổi thứ tự xếp chồng bằng cách đặt z-index. Cho khối màu đỏ - 3, màu xanh lam - 2, màu xanh lá cây - 1. Thứ tự xếp chồng sẽ thay đổi theo chiều ngược lại (ở trên cùng sẽ là khối có z-index 3):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}