Div 覆盖在 IFrame 顶部

Div overlay ontop IFrame

本文关键字：顶部 IFrame 覆盖 Div      更新时间：2023-09-26

我一直在尝试让它工作一段时间了。这可能是一些微不足道的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）。

提前谢谢你。

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

<iframe></iframe>
<div></div>
您必须

改用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>

只需添加top:0;

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

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

相关文章：