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（出于显而易见的原因，仅包含一个 pin 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。其次，您似乎有堆叠上下文的问题。看一下css 规范并仔细阅读，因为 z-index，IMO，过于复杂。

使用 z-index 时对我有帮助的一件事是 Firefox 中的“检查元素”选项。如果您选择要检查的元素，您将在右下角看到一个“3-D”选项。单击它，您可以更好地可视化堆栈顺序。

于 2012-09-13T09:03:22.903 回答