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）。

先感谢您。

Answer 1

您必须使用top: 0来将.overlay1设置为top。

 .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下，而不要放在其周围，并以绝对位置和边距顶部减去某个数字的方式将其拉出。

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

Answer 3

只需添加top:0;

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

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