Thuộc tính CSS z-index
đặt thứ tự z của phần tử được định vị và phần tử con hoặc phần tử linh hoạt của phần tử đó. Các phần tử chồng lấp có chỉ số z lớn hơn bao gồm các phần tử có chỉ số z nhỏ hơn
Đối với một hộp được định vị [nghĩa là một hộp có bất kỳ position
nào ngoài static
], thuộc tính z-index
chỉ định
- Cấp độ ngăn xếp của hộp trong bối cảnh xếp chồng hiện tại
- Hộp có thiết lập bối cảnh xếp chồng cục bộ hay không
/* Keyword value */
z-index: auto;
/* values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;
Thuộc tính z-index
được chỉ định là từ khóa
z-index =0 hoặc
auto |
|
inherit
z-index =0
auto |
|
inherit
z-index =0
auto |
|
inherit
Hộp không thiết lập bối cảnh xếp chồng cục bộ mới. Cấp độ ngăn xếp của hộp được tạo trong bối cảnh xếp chồng hiện tại là
z-index =2
auto |
|
inherit
z-index =0
auto |
|
inherit
z-index =0 này là cấp độ ngăn xếp của hộp được tạo trong bối cảnh xếp chồng hiện tại. Hộp cũng thiết lập bối cảnh xếp chồng cục bộ. Điều này có nghĩa là các chỉ mục z của con cháu không được so sánh với các chỉ mục z của các phần tử bên ngoài phần tử này
auto |
|
inherit
Giá trị ban đầu ________ 10Áp dụng cho các phần tử được định vịKế thừakhông có Giá trị được tính toánnhư đã chỉ địnhKiểu hoạt ảnhTạo ngữ cảnh xếp chồng
Bài viết đầu tiên của hướng dẫn này, Xếp chồng không có thuộc tính chỉ mục z, giải thích cách xếp chồng được sắp xếp theo mặc định. Nếu bạn muốn tạo thứ tự xếp chồng tùy chỉnh, bạn có thể sử dụng thuộc tính z-index
trên phần tử
Thuộc tính z-index
có thể được chỉ định bằng một giá trị nguyên [dương, 0 hoặc âm], đại diện cho vị trí của phần tử dọc theo trục z ảo. Nếu bạn không quen thuộc với thuật ngữ 'trục z', hãy tưởng tượng trang này là một chồng các lớp, mỗi lớp có một số. Các lớp được hiển thị theo thứ tự số, với số lớn hơn ở trên số nhỏ hơn [X đại diện cho một số nguyên dương tùy ý]
z-index
âmLớp 0Lớp hiển thị mặc địnhLớp XLLớp có giá trị z-index
dươngLớp trên cùngGần nhất với người quan sátGhi chú
- Khi không có thuộc tính
z-index
nào được chỉ định, các phần tử được hiển thị trên lớp hiển thị mặc định [Lớp 0] - Nếu một số phần tử chia sẻ cùng một giá trị
z-index
[i. e. , chúng được đặt trên cùng một lớp], quy tắc xếp chồng được giải thích trong phần Xếp chồng mà không áp dụng thuộc tính chỉ mục z
Trong ví dụ này, thứ tự sắp xếp của các lớp được sắp xếp lại bằng cách sử dụng z-index
. z-index
của DIV #5 không có tác dụng vì nó không phải là phần tử được định vị