保证始终在网页的顶部

Guaranteed always on top on a webpage

本文关键字：网页 顶部      更新时间：2023-09-26

我正在开发一个chrome扩展，没有太多进入它，我需要注入一些代码到网页，并把覆盖在整个页面。到目前为止，我几乎已经实现了这一点，但我似乎不能得到覆盖在某些网站的某些部分。这些包括来自youtube的视频，谷歌搜索结果顶部的搜索栏，kongregate的随机部分(星星和每月的比较信息)。

下面是我目前使用的css实现这一点，我已经玩了周围，并在不同的地方寻找解决方案，但没有解决方案似乎工作。

.cssX9482Overlay
{
    position: fixed;
    width: 100%;
    Height: 100%;
    vertical-align: middle;
    background: #000000;
    opacity: 0.97;
    filter: alpha(opacity=97);
    text-align: center;
    top: 0;
    left: 0;
}

奇怪的css名称只是为了不与页面格式冲突。正如你可能猜到的，这是用来格式化div

记住这是一个Chrome扩展，因此HTML5和CSS3解决方案是有效的。

<style type="text/css">
iframe, div {
    position:absolute;
    top:20px;
    left:20px;
    width:200px;
    height:25px
}
iframe { z-index:1 }
div {
    z-index:2;
    background:#000;
    border:solid 1px red;
    color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>

摘自:http://www.bluestudios.co.uk/blog/?p=6 还有height大写的

你可能需要一个z-index在那里;在我的谷歌搜索结果页面上，添加一个z-index: 999;覆盖除了顶部导航(Web，图像，视频)的所有内容。这是因为Google的CSS看起来像:

#gbz, #gbg {
  ...
  z-index: 1000;
}

具有较大z-index的元素被放在其他元素的顶部。即使在使用此属性时，我也会遇到将内容放置在Adobe Flash元素和Java applet之上的问题。

相关文章：