Div on Top of Iframe

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>

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 .

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>

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>

How can I place a div on top of an embedded video player in chrome

When you tried adding a z-index, did you specify positioning? z-index only works on positioned elements. so I added position: relative to both. Is this the effect you were going for?

http://jsfiddle.net/QPXAT/1/

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/

how to put an iframe absolutely on top without concealing the body

Wrap your body content within a DIV and position it under the iframe.

<iframe style="height:45px;position:absolute;top:0px;left:0px;" src="etc" scrolling="no" frameborder="0px"></iframe>

<div style='position:absolute;left:0;right:0;top:45px;bottom:0;overflow:auto;'>Your body content</div>

Div over iframe that is from iframe itself

The contents of an iframe cannot be displayed outside of the iframe. Within the iframe, you can have the div appear over other elements using "position: absolute" and "z-index: 1000" (or another appropriately large number). Note that absolutely positioned elements are removed from the flow of the document. The position can be set using the "top", "left", "right", and "bottom" CSS properties.

Div on Top of Iframe