div 覆盖在 IFrame 上答案

【问题标题】：Div overlay ontop IFramediv 覆盖在 IFrame 上
【发布时间】：2016-11-08 15:04:32
【问题描述】：

一段时间以来，我一直在努力让它发挥作用。这可能是一些微不足道的事情和 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)。

提前谢谢你。

【问题讨论】：

您希望“实时聊天”图像在哪里？

标签： javascript jquery html css iframe

【解决方案1】：

只需添加top:0;

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

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

【讨论】：

【解决方案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 {
	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>

【讨论】：

【解决方案3】：

将您的覆盖 div 放在 html 中的 iframe 下方，而不是在它周围，然后用绝对位置和顶部边距减去一些数字将其拉起。

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

【讨论】：