DadaB DadaB - 18 days ago 5
CSS Question

div on top of iframe

Im looking for a solution to place a div (100% screen width and lets say 20% height) on top of iframe which is 100% screen width and 100% screen height
It should look like this:

__________________________
|| On top DIV ||
||_______________________||
| |
| Iframe |
| |
|_________________________|

Answer

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">
   <iframe class="frame"></iframe>
   <div class="bar"></div>
</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