如何確保我的CSS覆蓋在任何網站的頂部？

Question

我有一個調用腳本並在網頁上放置CSS疊加的書籤。有一個頂部的酒吧有一個按鈕來關閉它，其餘的只是一個具有半透明背景的div。選擇一個隨機網站，它看起來很好，但例如，谷歌的頂欄覆蓋它，以及搜索和按鈕覆蓋覆蓋。另一個例子是reddit的標題。

我做這些div和按鈕：

var overlayBackground = document.createElement('div'); //main overlay that covers the page 
overlayBackground.setAttribute('id', "overlay_background"); 
document.body.appendChild(overlayBackground); 

var topBar = document.createElement('div'); 
topBar.setAttribute('id', "top_bar"); 
overlayBackground.appendChild(topBar); 


function cancelStuff(){ 
overlayBackground.removeChild(topBar); 
document.body.removeChild(overlayBackground); 
} 

topBar.innerHTML = "<button id= \"cancel_stuff\" onclick=\"cancelStuff()\">Click To Cancel</button>"; 

這裏是CSS：

#cancel_stuff{ 
zIndex:2147483647; 
font-weight:bold; 
font-size:2em; 
border:none; 
width:100%; 
height:50px; 
color:#FF9900; 
background-color:#336688; 
} 
#cancel_stuff:hover{ 
cursor: pointer; 
color:#336688; 
background-color:#FF9900; 
} 
#top_bar{ 
zIndex:2147483647; 
box-shadow:0px 3px 10px 2px black; 
position:fixed; 
top:0px; 
width:100%; 
height:50px; 
} 
#overlay_background{ 
float:left; 
zIndex:2147483647; 
position:fixed; 
left:0px; 
top:0px; 
width:100%; 
height:100%; 
background:rgba(240, 240, 240,0.8); 
} 

Answer 1

您正在尋找的z-index屬性，而不是zIndex屬性。再次嘗試使用此更改並查看它是否有效。

Google使用990的z-index作爲頂部欄，所以這應該可以正常工作。