jquery - 嵌套绝对元素上的 Z-index 重叠相似的绝对元素？

Question

这是 fiddle :http://jsfiddle.net/hrQG6/

HTML

<div id='map'>
    <div class='hotspot' id='hs1'>
        <div class='info-window'>
            Foobar
        </div>
    </div>
    <div class='hotspot' id='hs2'>
        <div class='info-window'>
            Foobar
        </div>
    </div>
</div>

CSS

.hotspot {
    position: absolute;
    z-index: 10;
    background-color: blue;
    height: 30px;
    width: 30px;
} 
.info-window {
    display: none;
    height: 250px;
     width: 250px;   
    background-color: green;
    position: absolute;
    z-index: 9999;
}​

.hotspot 元素显示在容器中。 .info-window 元素默认不显示。单击 .hotspot 将显示其对应的 .info-window。但是，我希望 .info-window 覆盖它下面的任何 .hotspot 元素。

相反，.hotspot 元素位于 .info-window 元素的顶部。从概念上讲，我误解了 position 和 z-index 的使用。

Answer 1

你的 .info-window元素在里面 .hotspot元素，两者都等于 z-index .想象一下:

<div></div>
<div></div>

因为我们设置了两个 <div> s 等于 z-index值，则它们具有相等的水平。默认情况下，第二个与第一个重叠只是因为标记中的顺序。

现在，考虑一下:

<div><div class="inner"></div></div>
<div><div class="inner"></div></div>

不管怎样z-index你给第一个.inner元素，它总是在第二个 <div> 下面容器，只是因为第一个 .inner元素的 <div>容器已经在第二个下面了。

这就像试图从建筑物的一楼跳得尽可能高:无论您跳多高，您都永远不会比二楼高，因为您最终会撞到天花板，这会阻止您从更高的地方。 [1]

更好的方法是使用大致相同的标记:

<div class="hotspot">
    <div class="info"></div>
</div>

并在 .hotspot 上使用或多或少相同的 CSS 规则:

.hotspot {
    position:absolute;
    z-index:10;
}

.hotspot .info {
    display:none;
}

然后，引入一个覆盖它的标志类:

.hotspot.active {
    z-index:20; /* let's raise this a bit */
}

.hotspot.active .info {
    display:block;
}

然后用 Javascript 操作它:

var hotspots = $('.hotspot').on('click', function (e) {
    hotspots.removeClass('active');
    $(this).addClass('active');
});