css - iframeの上のdiv

Question

画面幅100％、画面高さ100％のiframeの上にdiv（画面幅100％、高さ20％としましょう）を配置するソリューションを探しています。次のようになります。

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

Answer 1

超シンプルなもの..

iframeとヘッダーdivを1つのコンテナーdiv内に配置します。

コンテナでposition：relativeを設定し、ヘッダーdivでposition：absoluteとtop：0を設定します。

それはそれをする必要があります。

HTML：

<div class="holder">
   <div class="bar"></div>
   <iframe class="frame"></iframe>
</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;
}

フィドル

Answer 2

それは可能であるべきですが、何が問題ですか？

positionスタイルがabsolute(または、必要に応じて) に設定されていることを確認fixedし、必要に応じて適切に設定しますz-index。widthまた、必要に応じてとを調整heightします。