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 Answer
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.