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 this:

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

Decrement

I suppose, but why not put the div up top with a style of `style="position:fixed; width:100%; height: 200px; left: 0px; top: 0px;" and place the Iframe just below it with a width of 100% and a height of 100% - 200 px ... ?? – Banian

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:

<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

Loath

Your example and jsFiddle are broken, the div class=bar element should be above the iframe rather than below it. I tried this on my own and it surprisingly works even when the iframe has an outside source. I knew it should work technically but thought it might be a huge security issue. – Arraignment

@Arraignment - the .bar is absolutely positioned, hence it doesn't matter who precedes who in the markup, as the .bar will always appear above, unless z-indexed otherwise. – Loath

@Loath Well it doesn't work how you have it currently. – Wheaten

Worked great for me, but would change .holder to 100% for width and height. Most have the iframe at 100% – Guinea

Answer 2

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

<div class="holder">
  <iframe class="frame"></iframe>
  <div class="bar"></div>
</div>

Workable

Answer 3

It should be possible, what's the problem?

Make sure you have the position style set to absolute (or fixed, depending on your need) and set the proper z-index if necessary. Also adjust width and height as needed.

Batfowl