z-index không hành xử như tôi mong đợi

Question

vì vậy tôi đã có này, đại khái là:

<div id="A"> 
    <ul> 
     <li id="B">foo</li> 
    </ul> 
</div> 
<div id="C"> 
    ... 
</div> 

Đây là những vị trí sao cho B và C chồng chéo.

A có z-index của 90, B có z-index của 92, và C có z-index của 91. Nhưng C xuất hiện trước mặt B. Tôi đang làm gì sai? (Hãy cho tôi biết nếu cần thêm chi tiết.)

Answer 1

Sử dụng z-index chỉ liên quan đến các thành phần trong cùng một vùng chứa. Vì B được chứa bên trong A, chỉ số z của B sẽ chỉ áp dụng khi giải quyết các phần tử khác bên trong A. Theo như C có liên quan, cả B và A được trả về z-index 90. Tuy nhiên nếu C được đặt bên trong A, thì B sẽ hiển thị ở phía trước.

Answer 2

Nếu phần tử không có vị trí: tương đối/vị trí: tuyệt đối/vị trí: kiểu cố định, vị trí của nó: tĩnh là kiểu vị trí mặc định cho tất cả các phần tử.

Với phần tử là vị trí: tĩnh, chỉ mục z không hoạt động. Trình duyệt sẽ hiển thị ngăn xếp theo thứ tự phần tử xml và bỏ qua thuộc tính z-index.

Đối với một tình huống như thế này để làm việc, bạn cần phải thêm position: relative cho tất cả 3 yếu tố, A, B, C.

Để hiểu thêm về z-index và CSS xếp chồng, người đứng đầu để ở đây: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp