Html iframe 顶部的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13317626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div on top of iframe
提问by DadaB
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:
我正在寻找一种解决方案，将 div（100% 屏幕宽度，假设 20% 高度）放置在 iframe 顶部，即 100% 屏幕宽度和 100% 屏幕高度它应该如下所示：
__________________________
|| On top DIV ||
||_______________________||
| |
| Iframe |
| |
|_________________________|
回答by Rodik
Super simple stuff..
超级简单的东西。。
put an iframe, and a header div inside one container div.
将一个 iframe 和一个标题 div 放在一个容器 div 中。
set position:relative on the container, and position:absolute and top:0 on the header div.
在容器上设置 position:relative，在标题 div 上设置 position:absolute 和 top:0。
that should do it.
应该这样做。
HTML:
HTML：
<div class="holder">
<iframe class="frame"></iframe>
<div class="bar"></div>
</div>?
CSS:
CSS：
.holder{
width: 400px;
height:300px;
position:relative;
}
.frame{
width: 100%;
height:100%;
}
.bar{
position:absolute;
top:0;
left:0;
width:100%;
height:40px;
}
回答by alucab
The concept of Rodik answer is good but the implementation is buggy.
Rodik answer 的概念很好，但实现有问题。
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.
将一个 iframe 和一个标题 div 放在一个容器 div 中。
在容器上设置 position:relative，在标题 div 上设置 position:absolute 和 top:0。
http://jsfiddle.net/eayr9pup/2/
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>回答by pixelfreak
It should be possible, what's the problem?
应该是可以的，有什么问题吗？
Make sure you have the positionstyle set to absolute(or fixed, depending on your need) and set the proper z-indexif necessary. Also adjust widthand heightas needed.
确保您将position样式设置为absolute（或fixed，取决于您的需要）并在z-index必要时设置正确的样式。同时调整width和height需要。
