DIV对iframe的顶部(div on top of iframe)

进出口寻找一个解决方案，把一个div（100％屏幕宽度和让说，20％的高度）的IFRAME这是100％的屏幕宽度和100％的屏幕高度应该是这样的顶部：

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

Answer 1:

超级简单的东西..

放的iframe，和一个容器DIV中的报头的div。

设置位置：相对于在容器上，和位置：在头部的div 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 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%;
    background-color:blue;
}
.bar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background-color: red;
    }

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

Answer 3:

它应该是可能的，什么问题呢？

请确保您有position设置为风格absolute （或fixed ，取决于你的需要），并设置适当z-index ，如果必要的。 还可以调整width和height根据需要。

文章来源: div on top of iframe