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ます。概念的には、との使用を誤解していpositionますz-index。

4

5 に答える 5

3

あなたの.info-window要素は.hotspot要素の中にあり、どちらも等しいz-indexです。これを想像してみてください：

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

2つ<div>のsを等しいz-index値に設定しているので、それらは等しいレベルになります。2つ目は、デフォルトでは、マークアップの順序のために1つ目とオーバーラップします。

さて、これを考えてみましょう：

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

最初の要素に何z-indexを与えても、最初の要素のコンテナがすでに2番目の要素の下にあるという事実のために.inner、それは常に2番目のコンテナの下にあります。<div>.inner<div>

これは、建物の1階からできるだけ高くジャンプしようとするようなものです。最終的に天井にぶつかるので、ジャンプしても2階より高くなることはなく、天井にぶつかることができなくなります。より高い。[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値はの値よりも低くなりますが、 .info-windowinの上に表示されます。これにより、新しいスタッキングコンテキストが確立されます。#hs1.info-window.info-window#hs1

このMDNを読みたい場合は、いくつかの優れたリンクがあります。これは、TimKadlecによる非常に優れたブログ記事です。

于 2012-10-22T22:28:24.237 に答える