Question

我正在开发一个chrome扩展程序，不需要太多考虑，我需要在网页中注入一些代码并在整个页面上添加一个叠加层。到目前为止，我几乎已经实现了这一点，但我似乎无法覆盖某些网站的某些部分。其中包括来自youtube的视频，google搜索结果顶部的搜索栏，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解决方案有效。

Answer 1

<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大写

Answer 2

你可能需要z-index;在我的Google搜索结果页上，添加z-index: 999;涵盖了除顶部导航（网络，图片，视频）之外的所有内容。这是因为Google的CSS看起来像：

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

具有较大z-index的元素放在其他元素之上。即使在使用此属性时，我也在将内容置于Adobe Flash元素和Java小程序之上时遇到了问题。

保证永远在网页上

2 个答案: