css - div 在 iframe 之上

Question

我正在寻找一种解决方案，将 div(100% 屏幕宽度，比如说 20% 高度)放在 iframe 的顶部，即 100% 屏幕宽度和 100% 屏幕高度它应该看起来像这样:

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

Answer 1

super 简单的东西..

将一个 iframe 和一个 header div 放在一个容器 div 中。

在容器上设置 position:relative，在 header div 上设置 position:absolute 和 top:0。

应该这样做。

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