Div overlay ontop IFrame

Question

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.com"></iframe>
    <div class="overlay1">
      <img src="http://www.ore-processing.com/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.

Answer 1

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>

Answer 2

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