可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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">
<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>

回答2:

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.