ansaurus

Question

How can I position a div over two iframes where one iframe has external (different domain) content?

Answer 1

+1 A:

Your best bet would be to make sure you set styles to:

.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 to whatever you need. The main thing to be aware of is the z-index, higher values mean its higher up in the layer order with 0 or 1 being the lowest.

Some things to note; you can set your position to "position: relative;" too if the absolute positioning isn't conducive to the layout, in which case you may need to use negative top values to drag it back over top of the first iframe.

Soviut 2008-12-20 00:56:57

Answer 2

+3 A:

Take a look at this:

http://ahare.us/test.html

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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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"&gt;&lt;/iframe&gt;
  </div>
 </body>
</html>

Andrew Hare 2008-12-20 01:14:50

Doesn't work all the way in Safari 3. The pop-up div is "split" with like a cm horizontally about where the external frame starts.

PEZ 2008-12-21 21:47:03

ansaurus

tags:

views:

answers:

How can I position a div over two iframes where one iframe has external (different domain) content?

related questions