I've been trying to get this to work now for some time. It's probably something trivial and CSS.

The image is not overlaying the IFrame at the top of the page instead it shoots straight to the bottom.

Code:

.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=""></iframe>
    <div class="overlay1">
      <img src=".png" class="my_popup_open"></img>
</div>
</div>

I've been trying to get this to work now for some time. It's probably something trivial and CSS.

The image is not overlaying the IFrame at the top of the page instead it shoots straight to the bottom.

Code:

.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."></iframe>
    <div class="overlay1">
      <img src="http://www.ore-processing./d/images/livechat.png" class="my_popup_open"></img>
</div>
</div>

Basically I'm trying to put a button on top of an IFrame which then overlays a popup (JQuery) for a chat window.

Thank you in advance.

• javascript
• jquery
• html
• css
• iframe

Share Improve this question Follow asked Jul 6, 2016 at 14:07 David ElworthyDavid Elworthy 5311 silver badge77 bronze badges 1

• 1 where you want the "Live Chat" image to be? – Arun AK Commented Jul 6, 2016 at 14:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Put your overlay div under the iframe in the html not around it the pull it up with position absolute and a margin-top minus some number.

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

You have to set .overlay1 to top using top: 0 instead.

.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."></iframe>
    <div class="overlay1">
        <img src="http://www.ore-processing./d/images/livechat.png" class="my_popup_open"></img>
    </div>
</div>

Just add top:0;

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

When you add position:absolute; you should control using top, left, right and bottom.