Định nghĩa và sử dụng
Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.
Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị mặc định là 0.
Có thể sử dụng số âm.
Giá trị tốt nhất là không sử dụng đơn vị.
Chú ý: z-index chỉ làm việc cùng với thuộc tính position.
Cấu trúc
tag {
z-index: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| z-index | auto | z-index: auto; | Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định. |
| Giá trị | z-index: 10; | Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị. | |
| inherit | z-index: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
HTML viết:
<html> <head></head> <body> <div> <p class="element01">Thành phần 01</p> <p class="element02">Thành phần 02</p> </div> </body> </html>
Giả sử ban đầu CSS viết:
div {
position: relative;
}
p.element01 {
background: red;
height: 50px;
left: 30px;
position: absolute;
top: 30px;
width: 200px;
}
p.element02 {
background: blue;
height: 50px;
left: 30px;
position: absolute;
top: 30px;
width: 200px;
}
Hiển thị trình duyệt khi chưa có thuộc tính z-index:
Thành phần 01
Thành phần 02
Theo mặc định, thành phần nào có code nằm sau sẽ có thứ tự nằm trên, như thành phần 02 trong ví dụ.
Thêm thuộc tính z-index vào CSS:
div {
position: relative;
}
p.element01 {
background: red;
height: 50px;
left: 30px;
position: absolute;
top: 30px;
width: 200px;
z-index: 1;
}
p.element02 {
background: blue;
height: 50px;
left: 30px;
position: absolute;
top: 30px;
width: 200px;
}
Hiển thị trình duyệt khi có z-index:
Thành phần 01
Thành phần 02
Sử dụng z-index: 1; cho thành phần 01, lập tức thành phần 01 đước sắp xếp nằm trên.
Trình duyệt hỗ trợ
Thuộc tính z-index được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype