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

The concept of Rodik answer is good but the implementation is buggy.

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

2. 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;
}