Tại sao Chỉ mục Z không hoạt động CSS?

Đố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

1. Cấp độ ngăn xếp của hộp trong bối cảnh xếp chồng hiện tại
2. 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 = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit    

z-index = 
  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 = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit    

z-index = 
  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 ý)

Ghi 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