Div叠加在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 {
 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）来实现聊天窗口。

提前感谢。

- David Elworthy

---

您想在哪里放置“在线聊天”图像？ - Arun AK

Answer 1

您需要使用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>

- Anson

Answer 2

将您的遮罩层放在iframe下面，而不是周围。使用绝对定位和一个负的margin-top将其拉起来。

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

- Carol McKay

Answer 3

只需添加 top:0;

.overlay1 { /* 您的 CSS */ top: 0; }

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

- Arun Kumar