CSS - z-index không hoạt động chính xác

Question

Tôi đang sử dụng chỉ mục z trên trang của mình (-link không còn cần thiết nữa) và nó không hoạt động chính xác: nó không đặt một số div trên tất cả các loại khác.

Bạn có thể tự mình xem bằng cách nhấp vào một trong các mục ở bên trái hoặc thanh bên phải. Sau đó, mặt nạ sẽ mờ dần, nhưng hiển thị hộp tin nhắn, bên dưới nó. Tôi đã thử rất nhiều, nhưng tôi chỉ không thể nhận được hộp thông báo hiển thị ở trên tất cả những người khác ...

Tôi có thể làm gì để sửa lỗi này?[lưu ý: 2 câu hỏi dưới đây]

Nếu bạn không muốn kiểm tra trang, hộp thông báo nằm trong một số divs khác:

<div> 
<div> 
    <div>message box</div> 
</div> 
</div> 

CSS định vị là như thế này:

.window { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 100; 
} 

tôi sử dụng vị trí: cố định, bởi vì vị trí: tuyệt đối không phải là tuyệt đối ở đây, các div là không phù hợp với cơ thể, nhưng cái gì khác bằng cách nào đó. Có cách nào để đặt lại vị trí và đặt lại vị trí tuyệt đối không?

Answer 1

Nếu bạn đang sử dụng jquery kiểm tra top Z Index Plug In, bạn có thể áp dụng nó khi đối tượng có một con chuột qua sự kiện như:

<div id="modal" onmouseover="$(this).topZIndex();"></div> 

Sau đó, thay đổi vị trí để tuyệt đối với jquery cũng hoặc ngược lại:

$(document).ready(function(){ $('#modal').css('position','absolute'); }); 

Answer 2

nếu bạn loại bỏ z-index từ #leftbar nó sửa chữa vấn đề của bạn. Vị trí không quan trọng, miễn là bạn có.

Answer 3

Miễn là tôi có thể nhớ, các vấn đề về chỉ mục z thường xuất phát từ thực tế hơn là bố mẹ của các phần tử được lập chỉ mục z không được định vị. Bố mẹ anh chị em nên được định vị.