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。