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

回答

相關問題