Javascript – How to position a div over two iframes where one iframe has external (different domain) content


I am looking for a way to position a div (it would be a pop-up that would be activated by a user hovering and/or clicking much like lightbox) over an a split iframe where the top iframe is content from my server and the bottom iframe is content from another server. Like this:

 |                                      |
 |                   Upper              |
 |                                      |
 |           -------------------        |
 |          |      DIV          |       |
 ---------                       -------|
 |          |                   |       |
 |          --------------------        |
 |                                      |
 |                 Lower                |
 |                                      |

Basically it looks like a box that is split horizontally between the top (upper) and bottom (lower; the external content) and a DIV that hovers over the two so there is overlap on both the top and the bottom.

By the way, I also posted another question re: ajax versus iframes for external content and what I should use in this instance. So the lower (external content) doesn't necessarily have to be an iframe depending on the answer to that.

Best Solution

Take a look at this:

This page does pretty much what you are asking for. I would try to avoid z-index as much as possible because once you head down that road you are committed to it in ways that may become painful.

(Just so you know I tested this in Firefox 3 and IE 6).

Here is the code - I have two rules for the #pop div, the first is purely the presentation, the second rule has the positioning styles that make the whole thing work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            iframe { width:500px; height:200px; }
            #pop { width:400px; height:300px; background:#ff9; }
            #pop { position:absolute; top:50px; left:50px; }
        <div id="pop">this is the popup</div>   
            <iframe src="content.html"></iframe>
            <iframe src=""></iframe>