強制div成爲任何網頁和所有網頁的最頂層元素

我目前正在爲Chrome構建一個開源插件。它已經完成了很多工作 - 但我正在嘗試着解決一些問題。基本上，在任何和所有網頁中移動的div（注入頁面的HTML）需要成爲最頂層的元素，以便它可見。這是通過z-index @ 999實現的。然而，在一些網頁上，這是行不通的！強制div成爲任何網頁和所有網頁的最頂層元素

在我的頭頂上，當您在code.google.com上登錄時，菜單欄覆蓋了我的div。

無論Web開發人員做什麼，如何強制它被注入最高層？

這裏是我的DIV + CSS：

#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) */ 
}

P.S.，我試圖無濟於事重要！

謝謝！

來源

2012-12-06 aeharding

那麼'z-index：999'顯然不會把這個元素放在其他具有'z-index：1000'或更高的元素之上... – nnnnnn

確切地說，這可能會有所幫助：http：/ /stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index – lbstr

您的z-index是999.在這種情況下您要覆蓋的元素（帶有附加的.menuDiv類的元素）的z索引具有1001的z索引。999不是任何拉伸最大z-index值的瀏覽器允許，所以你注入的div將會低於更高的z-indexed元素。

根據您收到的問題的評論之一，請參閱Minimum and Maximum value of Z-INDEX關於允許的z-索引值的討論以及如果您嘗試創建最大級別元素（通常爲+2147483647）時要使用什麼。

如果你知道，你永遠不希望被任何東西所分層此元素（警告：除了潛在的元素也使用相同的），使用：

z-index: 2147483647;

您可以考慮使用一些稍低如果你想保留一些靈活性。有時你可能會被一個競爭性元素分層，這可能是值得的。只要您的z-index值接近Max，您還可以編寫腳本來將您的z-index降至低於您的值，如果您不介意可能會導致您的插件出現一些呈現問題。

如果您再次遇到類似情況，Chrome會提供相當不錯的內置檢查工具：右擊導致問題的元素，檢查元素，然後展開右側顯示區域中的「計算樣式」。請注意，z-index可能很難跟蹤（即使啓用了「視圖繼承」）：您需要選擇適當定位的div/etc，而不是靜態內部元素。只要堅持退出嵌套，直到找到它。

來源

2012-12-06 21:23:02 taswyn

感謝您的提示。聽到這個理論極限非常酷。不幸的是 - 我的問題仍然在發生（清除緩存等）。是否還有其他影響z分層和最重要的東西？ – aeharding

爲了測試，我將您的CSS附加到了code.google.com/p/chromium頁面。然後，我使用ezselected id屬性添加了一個div（到body），並在其中放置了一些測試文本，但是覆蓋了寬度和頂部以確保它與右上方的菜單區域部分重疊。你開始使用z-index，它會在菜單下拉菜單下。提高Z指數高於谷歌用於那些（1001）固定它。你可能在你的css中有其他的東西在其他地方重寫，或者如果你有更多的使用非靜態定位的內部元素，他們可能會採取不同的z-index？ – taswyn

嘗試檢查呈現的自己的元素並查看計算出的z-index是什麼。 – taswyn

強制div成爲任何網頁和所有網頁的最頂層元素

回答

相關問題