How can I put a div over two iframes where one iframe has external (different domain) content?
I'm looking for a way to position the div (this will be a popup that will be activated by the user hovering and / or clicking just like a lightbox) over 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 | | | ----------------------------------------
It basically looks like a box that splits horizontally between the top (top) and bottom (bottom, outer content) and the DIV that hangs over them, so the overlap happens at both the top and bottom.
BTW, I also posted another question re: ajax vs iframes for external content and what should I use in this case. So the bottom (outer content) doesn't have to be an iframe depending on the answer to this question.
source to share
Take a look at this:
This page does pretty much what you're asking for. I will try to avoid the z-score as much as possible, because once you get down this road, you are committed to it in ways that can get 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 view, the second rule has positioning styles that make the whole thing work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<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; }
</style>
</head>
<body>
<div id="pop">this is the popup</div>
<div>
<iframe src="content.html"></iframe>
</div>
<div>
<iframe src="http://www.google.com"></iframe>
</div>
</body>
</html>
source to share
Your best bet would be to make sure you are setting the styles:
.overlapper
{
position: absolute;
z-index: 9000; /* some very high value to ensure its always on top */
top: 50px; /* whatever positioning you need */
left: 50px;
width: 500px;
height: 100px;
}
Just set your values as you like. The main thing to know is the z-index, higher values mean its highest in layer order with 0 or 1, which is the lowest.
Some notes; you can set your position to position: relative; too, if absolute positioning is not conducive to layout, in which case you may need to use negative tops to drag it back over the top of the first iframe.
source to share