div iframe顶部

我正在寻找一种解决方案，在100％屏幕宽度和100％屏幕高度的iframe之上放置一个div（100％屏幕宽度，可以说20％高度）它应该看起来像这样：div iframe顶部

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

来源

2012-11-09 DadaB

我猜想，但为什么不把DIV向上顶用的'风格=“位时的风格：fixed; width：100％; height：200px; left：0px; top：0px;“并将Iframe放在它的下方，宽度为100％，高度为100％ - 200 px ...？ – Zak

超级简单的东西..

把一个iframe和一个头div放在一个容器div里面。

设置位置：相对于容器，位置：absolute和top：0在标题div上。

应该这样做。

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

来源

2012-11-09 23:53:30 Rodik

你的例子和jsFiddle被破坏了，div class = bar元素应该在iframe之上而不是在它之下。我自己尝试了这一点，即使iframe具有外部来源，它也令人惊讶地工作。我知道它应该在技术上工作，但认为这可能是一个巨大的安全问题。 – Derek

@Derek - .bar是绝对定位的，因此谁在标记之前谁先行并不重要，因为.bar总是会出现在上面，除非以其他方式进行z-索引。 – Rodik

@Rodik好吧，它目前无法工作。 – Tim

应该是可以的，有什么问题？

确保您有position款式设置为absolute（或fixed，根据您的需要），并根据需要设置合适的z-index。根据需要还调整width和height。

来源

2012-11-09 23:48:57 pixelfreak

Rodik答案的概念是好的，但实施是马车。

将一个iframe和一个头div放在一个容器div内。
设置位置：相对于容器，位置：absolute和top：0在标题div上。

在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/

来源

2016-11-20 21:51:53 alucab

谢谢，它适用于我 – dgiaig

回答

相关问题