Force div là phần tử trên cùng của bất kỳ và tất cả các trang web

Question

Tôi hiện đang xây dựng một plugin nguồn mở cho Chrome. Nó khá xa - nhưng có một vài lỗi mà tôi đang cố gắng phân loại. Về cơ bản, một div (được chèn vào HTML của trang) di chuyển trong toàn bộ bất kỳ và tất cả các trang web cần phải là phần tử trên cùng để nó hiển thị. Điều này đạt được bởi z-index @ 999. Trên một số trang web tuy nhiên, điều này không hoạt động!

Tắt đầu của tôi, thanh trình đơn khi bạn đăng nhập tại code.google.com chồng lên div của tôi.

Làm cách nào để buộc nó trở thành phần trên cùng khi được tiêm bất kể nhà phát triển web làm gì?

Dưới đây là CSS của tôi cho div:

#ezselected { 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    position:absolute; 
    border-radius: 15px; 
    z-index: 999; 
    -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80); 
    -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80); 
    /*box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);*/ 
    pointer-events:none; /* Make click-able through the DIV (for example, if it's on top of something with an event with kb) */ 
} 

T.B., tôi đã cố gắng quan trọng vô ích!.

Cảm ơn!

Answer 1

Chỉ số z của bạn là 999. Chỉ mục z của phần tử bạn đang cố gắng che trong trường hợp này (một phần tử có lớp .menuDiv đính kèm) có chỉ số z là 1001. 999 không phải là bất kỳ khoảng cách nào trình duyệt giá trị z-index tối đa cho phép, do đó, div được chèn của bạn sẽ nằm dưới các phần tử có chỉ mục z cao hơn.

Theo một trong các nhận xét mà câu hỏi của bạn nhận được, hãy xem Minimum and Maximum value of Z-INDEX để thảo luận về giá trị chỉ mục z cho phép và những gì cần sử dụng nếu bạn đang cố tạo yếu tố cấp cao nhất (thường là +2147483647).

Nếu bạn biết rằng bạn không bao giờ muốn yếu tố này để được lớp trên bởi bất cứ điều gì (caveat: trừ khả năng yếu tố này cũng sử dụng cùng một), sử dụng:

z-index: 2147483647; 

Bạn có thể xem xét sử dụng một cái gì đó hơi thấp nếu bạn muốn giữ lại sự linh hoạt nào đó. Vài lần bạn có thể được xếp lớp bởi một yếu tố cạnh tranh có lẽ sẽ có giá trị nó. Vì vậy, miễn là giá trị z-index của bạn gần Max, bạn cũng có thể viết một cái gì đó để hạ thấp bất kỳ chỉ mục z nào phía trên của bạn xuống dưới của bạn nếu bạn không ngại gây ra một số sự cố hiển thị với plugin của mình.

Chrome có công cụ kiểm tra tích hợp khá tốt nếu bạn có tình huống tương tự lần nữa: nhấp chuột phải vào phần tử gây ra sự cố, kiểm tra phần tử và sau đó mở rộng "Kiểu được tính" trong khu vực hiển thị bên phải. Lưu ý rằng chỉ mục z có thể khó theo dõi (ngay cả khi đã bật chế độ xem "được thừa kế"): bạn cần phải chọn một vị trí div/etc được đặt đúng vị trí, chứ không phải các phần tử bên trong tĩnh. Chỉ cần giữ cho ra khỏi nesting cho đến khi bạn tìm thấy nó.