在iframe之上的div

Question

我正在寻找一种解决方案，在iframe顶部放置一个div（100％的屏幕宽度，比如20％的高度），这是100％的屏幕宽度和100％的屏幕高度 它应该是这样的：

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

Answer 1

超级简单的东西......

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

在容器上设置position：relative，并在header 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;
}

fiddle

Answer 2

Rodik答案的概念很好，但实施方案有问题。

1. 在一个容器div中放置一个iframe和一个标题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。