Guaranteed always on top on a webpage

I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full pag开发者_如何学编程e. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).

Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.

.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;
}

The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div

Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.

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

TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6 Also you had height capitalized

You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:

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

Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.