CODEWITHSUNDEEP
htmlcssiframe
Kyle Mock
Kyle Mock

Reputation: 15

Stacking a div on top of an iframe

I have tried many times get I cannot get it, I am trying to put a div on top of Iframe content

<div align="middle">
    <div style="position: relative;">
        <iframe 
        src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg"
        width="1000" height="670" scrolling="no">
    </div>
    <div style="position: absolute; left: 50px;">
        <p>hi</p>
    </div>

The green picture is just for example. I just have a file hosted on one server that shows a slideshow and I want to be able to put a couple of links on top of it

Upvotes: 0

Views: 2236

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21234

Try having the iframe and the div to place on top positioned absolute, and both inside an relative positioned container. A quick edit to your code:

<div style="position: relative;">
    <iframe style="position: absolute;" src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg" width="1000" height="670" scrolling="no"></iframe>
    <div style="position: absolute; left: 50px;">
        <p>hi</p>
    </div>
</div>

And a demo on jsfiddle: http://jsfiddle.net/Zk3Hq/

Upvotes: 1

Related Questions