Overlay Div Over Iframe

overlay div over iframe

If you're not loading cross domain then you could just load in using jquery ajax call
http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

and replace your iframe with

<div id="content"></div>

div on top of iframe

Super simple stuff..

put an iframe, and a header div inside one container div.

set position:relative on the container, and position:absolute and top:0 on the header div.

that should do it.

HTML:

<div class="holder">
   <div class="bar"></div>
   <iframe class="frame"></iframe>
</div>

CSS:

.holder{
    width: 400px;
    height: 300px;
    position: relative;
}

.frame{
    width: 100%;
    height: 100%;
}

.bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

fiddle

Div overlay ontop IFrame

Put your overlay div under the iframe in the html not around it the pull it up with position absolute and a margin-top minus some number.

<iframe></iframe>
<div></div>

Div over an iframe

I'll assume that youre <iframe> is a direct child of page's <body>.
You can easily achieve your goal by settings the right right, bottom and z-index properties of your corner div.

Don't forget that the z-index property controls how the elements are placed on the z axis (look at mdn description for more information).

Here is an exemple of what it can looks like :

#iframe {  position: fixed;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%;  border: none;  margin: 0;  padding: 0;  overflow: hidden;  z-index: 0;}
#corner {  position: absolute;  right: 0;  bottom: 0;  height: 100px;  width: 200px;  background-color: blue;  z-index: 1;}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <title>Document</title></head>
<body>  <iframe id="iframe" src=""></iframe>  <div id="corner">I'm in right bottom corner !</div></body>
</html>

overlaying an iframe over another iframe

Yes , it can be done, not a problem. The problem that you have here is that, while you are loading frame2 in frame1 , then you need to center it using top and left attributes.

Again, the usage of attrs namely: seamless and zindex are not required.

This is the full code :

<iframe id="gameIFrame1" style="width: 200px; height: 200px;   display: block; position: absolute;" src="http://www.guguncube.com">
</iframe>

<iframe id="gameIFrame2" style="width: 100px; height: 100px; top: 50px;    left: 50px;    display: block;    position: absolute;" src="http://www.guguncube.com">
</iframe>

Find the fiddle here :

http://jsfiddle.net/cxbmu/1/ , where you obviously can see the screen shot of what you are expecting it to be .

Stacking a div on top of an iframe

Try having the iframe and the div to place on top positioned absolute, and both inside an relative positioned container. A quick edit to your code:

<div style="position: relative;">
    <iframe style="position: absolute;" src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg" width="1000" height="670" scrolling="no"></iframe>
    <div style="position: absolute; left: 50px;">
        <p>hi</p>
    </div>
</div>

And a demo on jsfiddle:
http://jsfiddle.net/Zk3Hq/

Events with overlay div on top of iframe

To solve the problem in IE9 you can try the following workaround: add a background-color (e.g. #fff) to the div that overlaps the iframe and set the opacity of the div to 0 (opacity is only supported by IE9, not IE8). I have setup a quick jsfiddle to demonstrate this solution. Note that the overlapping div is clickable and not the iframe contents (links and text).

Overlay Div Over Iframe