Search code examples
javascriptjqueryiframepositioning

Position iframe Overtop of Images/JS Loaded Images, Now iFrame is Under the Image

Having a problem, on my site I call a iframe using hidden in a DIV but when the iframe shows up the images of the site cover up the iframe.

I need a way to be able to position the iframe to the top of the page/overtop of the images that are currently blocking part of the iframe.

You can see my coding here on this domain: www.SEO.mobi

To get access to see the iframe you need to on your keyboard enter:

↑↑↓↓←→←→BA↵

Solution

  • Each of your images in the slideshow has a z-index set.

    <image style="z-index:6"/>

<image style="z-index:5"/>

<image style="z-index:4"/>

<image style="z-index:3"/>

<image style="z-index:2"/>

<image style="z-index:1"/>

    Your pop-up div has z-index:2 so the images with z-index above 2 will be positioned above the iframe.

    <div id="popupContact">...</div>

#popupContact{
    z-index:2;
}

    A quick fix would be to give the pop-up div a higher z-index than other elements.