Google Chrome, html toolbar - always on top problem
I am working on a toolbar for Google Chrome as a part of extension. Let's say the toolbar is a simple rect described by the below css:
#top{
display: none;
width: 100%;
background: red;
z-index:9999999;
height:40px;
}
I inject the toolbar which looks more less like:
<body>
<div id="panel_left">
....
</div>
<div id="panel_right">
....
</div>
</body>
And I inject it to the iframe by:
$("body").before('<iframe name="top" id="top" frameborder="0"></iframe>');
var top = document.getElementById("top");
top.src = chrome.extension.getURL("top.html");
The problem starts on some webpages because of their css that is able to cover my toolbar. I expect the toolbar to start from the very top开发者_StackOverflow社区 of the website take 40px height and then to display the usual webpage content.
Have you got any ideas how to do it (or rather improve it, because it works on some webpages)
Have you tried to add :
top: 0;
left: 0;
margin: 0;
padding: 0;
Add this before insert you toolbar :
// Take down the webPage
document.getElementsByTagName('body')[0].style.marginTop = '39px';
// Or more if your toolbar is greater
Just for all users looking for the same solution. It works:
body
{
position: fixed;
width: 100%;
height: 100%;
position:relative;
}
加载中,请稍侯......
精彩评论