在iframe上的div [英] div on top of iframe

问题描述

我在寻找一个解决方案来放置一个div（100％的屏幕宽度，让我们说20％的高度）在iframe的顶部是100％的屏幕宽度和100％的屏幕高度
它应该看起来像这样： / p>

Im looking for a solution to place a div (100% screen width and lets say 20% height) on top of iframe which is 100% screen width and 100% screen height It should look like this:

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

推荐答案

超简单的东西..

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

put an iframe, and a header div inside one container div.

设置位置：在容器上的相对位置，

set position:relative on the container, and position:absolute and top:0 on the header div.

HTML：

b
$ b

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

小提琴

这篇关于在iframe上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！