div on top of iframe

Question

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

Answer 1

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:

   

   
​

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