Question

我有一系列漂浮的div，在悬停时显示弹出窗口。问题是弹出窗口出现在下面的div下面，我无法找到一种方法来使用z-index来消除这个问题......似乎没什么用。

编辑：在帮助下我已经解决了问题但不是IE7或更低版本。

任何一个想法？

HTML

<div>

    <div>
        <img src="/bc.jpg" width="54" height="54" id="bc-icon" alt="test1" />
        <span><strong>test1</strong><br />dfgsertsrytwsertyrtyrsty</span>
    </div>

    <div>
        <img src="/bb.jpg" width="54" height="54" id="bb-icon" alt="test2" />
        <span><strong>test2</strong><br />dsfgsdfgsdfgsdfgsdfgsdfgsdfg</span>
    </div>

    <div>
        <img src="/rd.jpg" width="54" height="54" id="rd-icon" alt="test3" />
        <span><strong>test3</strong><br />dfgdfgdsfgsdfgsdfgsdfgsdfgsdfg</span>
    </div>

    <div>
        <img src="/bl.jpg" width="54" height="54" id="bl-icon" alt="test4" />
        <span><strong>test4</strong><br />dsfgsdfgsdfgsdfgsdfgsdfg</span>
    </div>

</div>

CSS

div {clear:both; padding:0 0 8px 0; border:none; width:576px;}

div div { float:left; margin: 0 8px 0 0; padding:0; width:56px; clear:none; overflow:visible; position:relative; background-color:#B22222;}       

div div img { padding:1px; cursor:pointer; display:block;}

div div span { background-color:#89A7BA; position:absolute; bottom:26px; left:-19px; padding:5px 10px; font-family:'MS Sans Serif',Geneva,sans-serif;  border:2px solid #FFF; font-size:12px; display:none;}

div div span img { position:absolute; bottom:-18px; left:34px;}
div div span strong {font-size:14px; text-transform:uppercase;}

和jquery创建弹出窗口......

$.fn.hoverAnimation = function() {
    return $(this).each(function() {
        return $(this).hover(function() {
            $(this).find("span").slideDown(100);
            $(this).css("background-color", "#000");
        }, function() {
            $(this).find("span").slideUp(100);
            $(this).css("background-color", "#B22222");
        });
    });
}

$("div > div").hoverAnimation();

加上我在jsfiddle here

中设置了它

Answer 1

解决你的问题任何更大的不应该没关系

span {z-index:200}

这里的工作副本

http://jsfiddle.net/dfgsH/

Answer 2

你说得对 - IE7无法正常运行。问题是IE7基于包含需要显式设置的元素的z索引来计算z索引。每当你position时，它都会影响它的z-index。这会让你处于轻微的困境。您通常会将父元素设置为position:relative; z-index:1以重置z-indexing，但这不适用于您的情况，因为您需要在第一个div和所有子div上设置它（因为您使用{{1 }} 在这些上）。当你在子div上设置它们时，它们会开始一个新的z-index堆栈，让你陷入同样的困境。

但我有一个潜在的解决方案。仅在jQuery触发时在子div上设置position: relative。见this example

IE中的z-index混淆

2 个答案: