Thuộc tính chỉ mục z của CSS
Ví dụ
Đặt chỉ mục z cho hình ảnh:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính z-index
chỉ định thứ tự ngăn xếp của một phần tử.
Phần tử có thứ tự ngăn xếp lớn hơn luôn ở phía trước phần tử có thứ tự ngăn xếp thấp hơn.
Lưu ý: z-index
chỉ hoạt động trên các phần tử được định vị (vị trí: tuyệt đối, vị trí: tương đối, vị trí: cố định hoặc vị trí: cố định) và các mục flex (các phần tử là con trực tiếp của phần tử display:flex ).
Lưu ý: Nếu hai phần tử được định vị chồng lên nhau mà không chỉ định z-index
thì phần tử được đặt ở vị trí cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.zIndex="-1" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
Cú pháp CSS
z-index: auto| number |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | Demo ❯ |
number | Sets the stack order of the element. Negative numbers are allowed | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: Định vị CSS
Tham chiếu DOM HTML: thuộc tính zIndex