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;
}
: