Question

我一直试图让这个工作一段时间。它可能是微不足道的CSS和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 {
	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

您必须使用.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 {
	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 2

将你的叠加div放在html中的iframe下面而不是它周围的位置绝对值和一个margin-top减去一些数字。

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

Answer 3

只需添加top:0;

即可

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

当您添加position:absolute;时，您应该使用top, left, right and bottom进行控制。

Div覆盖ontop IFrame

3 个答案: