CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
David Elworthy
David Elworthy

Reputation: 53

Div overlay ontop IFrame

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.

Upvotes: 3

Views: 5816

Answers (3)

Arun Kumar
Arun Kumar

Reputation: 83

Just add top:0;

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

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

Upvotes: 0

Anson
Anson

Reputation: 489

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>

Upvotes: 2

Carol McKay
Carol McKay

Reputation: 2424

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>

Upvotes: 2

Related Questions