Div覆蓋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>

基本上我試圖把的iframe，然後覆蓋了聊天窗口的彈出（JQuery的）頂部的按鈕。

預先感謝您。

Answer 1

將您的覆蓋div放在html中的iframe下面，不要將它放在絕對位置，並將margin-top減去一些數字。

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

Answer 2

你必須設置.overlay1使用top: 0，而不是頂部。

.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

只需添加top:0;

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

當您添加position:absolute;你應該控制使用top, left, right and bottom。