css - iframe 顶部的 div

Question

我正在寻找一种解决方案，将 div（100% 屏幕宽度和 20% 高度）放置在 iframe 之上，即 100% 屏幕宽度和 100% 屏幕高度它应该如下所示：

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

Answer 1

超级简单的东西。。

在一个容器 div 中放置一个 iframe 和一个标头 div。

在容器上设置 position:relative，在标题 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;
}

小提琴

Answer 2

Rodik 答案的概念很好，但实现起来有问题。

1. 在一个容器 div 中放置一个 iframe 和一个标头 div。

2. 在容器上设置 position:relative，在标题 div 上设置 position:absolute 和 top:0。

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>

Answer 3

应该可以，有什么问题？

确保您将position样式设置为absolute（或fixed，取决于您的需要）并在z-index必要时设置正确的样式。也可以根据需要进行width调整。height