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
The concept of Rodik answer is good but the implementation is buggy.
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.
http://jsfiddle.net/eayr9pup/2/
.holder {
width: 400px;
height: 300px;
position: relative
}
.frame {
width: 100%;
height: 100%;
background-color: blue;
}
.bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: red;
}
<div class="holder">
<iframe class="frame"></iframe>
<div class="bar"></div>
</div>