Div Overlay ontop IFrame

Question

私はこれをしばらくの間使用しています。それはおそらく何か些細なCSSです。

イメージは、ページの上部のIFrameにオーバーレイされず、下部にまっすぐに撃たれます。

コード：

.overlay{ 
 
width: 100%; 
 
    height:100%; 
 
    position:relative; 
 
} 
 
.overlay1{ 
 
    z-index: 1; 
 
position:absolute; 
 
     left: 55%; 
 
     margin-right: -50%; 
 
     transform: translate(-50%, -50%); 
 
    width: 40px; 
 
    height: 20px; 
 
    background-color: rgba(0,0,0,0.5); 
 
} 
 

 
.frame { 
 
\t width: 100%; 
 
    height: 100%; 
 
}

<div class="overlay"> 
 
    <iframe class="frame" allowtransparency="true" src="http://blah.com"></iframe> 
 
    <div class="overlay1"> 
 
     <img src="http://www.ore-processing.com/d/images/livechat.png" class="my_popup_open"></img> 
 
</div> 
 
</div>

基本的に私は、チャットウィンドウのポップアップ（jQueryの）をオーバーレイするのIFrameの上にボタンを配置しようとしています。

ありがとうございます。

Answer 1

オーバーレイdivをiframeの下にhtmlの中に置いて、絶対位置とマージントップマイナスの数字でプルアップします。

<iframe></iframe> 
<div></div> 

Answer 2

あなたが代わりにtop: 0を使用してトップに.overlay1を設定する必要があります。

.overlay { 
 
    width: 100%; 
 
    height:100%; 
 
    position:relative; 
 
} 
 
.overlay1 { 
 
    z-index: 1; 
 
    position:absolute; 
 
    left: 55%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 40px; 
 
    height: 20px; 
 
    background-color: rgba(0,0,0,0.5); 
 
    top: 0; 
 
} 
 

 
.frame { 
 
\t width: 100%; 
 
    height: 100%; 
 
}

<div class="overlay"> 
 
    <iframe class="frame" allowtransparency="true" src="http://blah.com"></iframe> 
 
    <div class="overlay1"> 
 
     <img src="http://www.ore-processing.com/d/images/livechat.png" class="my_popup_open"></img> 
 
    </div> 
 
</div>

Answer 3

ちょうどあなたがposition:absolute;を追加するときは、top, left, right and bottomを使用して制御する必要がありますtop:0;

.overlay1 { /* Your css */ top: 0; }

を追加します。