1

多数の「ピン」を備えたかなり単純なインタラクティブ マップがあり、ホバーすると対応する「タグ」が表示されます。

CSS (無関係なプロパティは省略):

#map { position: relative; }
.map-pin { display: block; position: absolute; }
.map-tag { float: left; left: 20px; opacity: 0; pointer-events: none; position: absolute; }
.map-pin:hover .map-tag { opacity: 1; pointer-events: all; }

HTML (明らかな理由から、1 つのピン div のみが含まれています):

<div id="map">

    <div id="map-pin-1" class="map-pin">
        <div class="map-tag"></div>
    </div>

</div>

問題は、タグに十分に高い z-index 値を与えたにもかかわらず、タグが他のすべてのピンの上に表示されないことです。DOM の特定のタグの上にあるピンの上にのみ表示されるようです。たとえば、#map-pin-3 .map-tagと の上#map-pin-1に表示されます#map-pin-2が#map-pin-4、タグの上に表示されます。

助言がありますか？

4

1 に答える 1

0

まず、コード サンプルの map-tag 要素に z-index が定義されていません。次に、コンテキストのスタックに問題があるようです。z-index (IMO) は非常に複雑なので、css 仕様をよく読んでください。

また、z-index を使用するときに役立つことの 1 つは、Firefox の「要素の検査」オプションです。検査する要素を選択すると、右下隅に「3-D」オプションが表示されます。それをクリックすると、スタックの順序をよりよく視覚化できます。

于 2012-09-13T09:03:22.903 に答える