css - 谷歌浏览器,html 工具栏 - 总是在最前面的问题

标签 css google-chrome toolbar

我正在为 Google Chrome 开发一个工具栏作为扩展的一部分。假设工具栏是一个由以下 CSS 描述的简单矩形:

#top{
    display: none;
    width: 100%;
    background: red;
    z-index:9999999;
    height:40px;

}

我注入(inject)了看起来更不像的工具栏:

<body>
    <div id="panel_left">
    ....
    </div>
    <div id="panel_right">
    ....
    </div>
</body>

我通过以下方式将它注入(inject) iframe:

$("body").before('<iframe name="top" id="top" frameborder="0"></iframe>');
var top = document.getElementById("top");
top.src = chrome.extension.getURL("top.html");

问题开始于某些网页,因为它们的 css 能够覆盖我的工具栏。我希望工具栏从网站的最顶部开始,高度为 40px,然后显示通常的网页内容。

你有没有想过如何去做(或者更确切地说是改进它,因为它在某些网页上有效)

最佳答案

您是否尝试添加:

top: 0;
left: 0;
margin: 0;
padding: 0;

在插入工具栏之前添加:

// Take down the webPage
document.getElementsByTagName('body')[0].style.marginTop = '39px'; 
// Or more if your toolbar is greater

关于css - 谷歌浏览器,html 工具栏 - 总是在最前面的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5437600/

相关文章:

android - 工具栏上后退按钮的自定义图像和颜色

javascript - 如何使用以下 Grunt 配置编译 Sass 文件?

html - 无法让我的页面响应移动设备

javascript - jquery可以打开本地目录路径吗? chrome.fileSystem 可以与 jquery 一起使用来实现此解决方案吗?

google-chrome - 使用适用于 Chrome 的 VSCode 扩展调试器同时运行多个项目

java - Action 中的备用图标和标题

javascript - CKEDITOR 4.0 动态分离工具栏

javascript - 如何使弹出式 div 在单击时隐藏/显示

html - 从嵌入式 Feedburner 自定义 RSS 输出 - 移动应用程序 (HTML5)

css - 谷歌浏览器将部分屏幕外的 div 加宽一个像素