3

这是小提琴：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默认情况下不显示元素。单击 a.hotspot将显示其对应的.info-window. 但是，我希望.info-window覆盖.hotspot它下面的任何元素。

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

4

5 回答 5

3

您的.info-window元素是内部.hotspot元素，两者都有 equal 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>

并使用或多或少相同的 CSS 规则.hotspot：

.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');
});
于 2012-10-22T22:22:29.743 回答
2

通过消除

z-index: 10;

从您的 .hotspot 我相信它可以解决您的问题。

更新的小提琴

于 2012-10-22T22:22:49.040 回答
1

您应该为父元素定义z-index属性，目前它们都具有相同的 z-index 值。

#hs1 { 
    top: 10px;
    left: 20px;
    z-index: 2;
}    
#hs2 { 
    top: 150px;
    left: 120px;
    z-index: 1;
}

http://jsfiddle.net/MMj8S/

于 2012-10-22T22:20:36.783 回答
1

因为您的信息框是热点 div 的子项，所以您必须影响容器 ala 的 zIndex：

$('.hotspot').click(function() {
    $('.hotspot').css('zIndex', 1);  //Force all hotspots to the back
    $(this).css('zIndex', 9999);  //force this hotspot to the front
    $('.info-window').hide();  //Hide all infoboxes, in case of overlap
    $(this).find('.info-window').show();     //show the infobox inside this div
});​

http://jsfiddle.net/hrQG6/3/

于 2012-10-22T22:26:09.377 回答
1

这里的核心问题是 CSS 堆叠上下文，它比乍一看更难理解。

#hs2即使它的 z-index 值低于 of 也出现在.info-windowin之上，因为它是 的后代，它建立了一个新的堆叠上下文。#hs1.info-window.info-window#hs1

如果你想阅读这个MDN，这里有几个很好的链接，Tim Kadlec 的非常好的博客文章

于 2012-10-22T22:28:24.237 回答