在iframe之上的div

Question

我正在寻找一个解决方案来放置一个div(100%的屏幕宽度,让我们说20%的高度)在iframe的顶部,这是100%的屏幕宽度和100%的屏幕高度它应该是这样的:

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

Answer 1

超级简单的东西..

将一个iframe和一个标题div放在一个容器div中.

设置位置:容器上的相对位置,以及头部div上的position:absolute和top:0.

应该这样做.

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

小提琴

Answer 2

Rodik答案的概念很好,但实施是错误的.

1. 将一个iframe和一个标题div放在一个容器div中.

2. 设置位置:容器上的相对位置,以及头部div上的position:absolute和top:0.

在HTML代码中

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

在CSS中

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

http://jsfiddle.net/eayr9pup/2/