Z-index 不适用于多个绝对定位元素

Question

我有一个相当简单的交互式地图，上面有一堆“图钉”，悬停在上面时会显示相应的“标签”。

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 将出现在标签上方。

有什么建议吗？

Answer 1

首先，在您的代码示例中，我没有看到在 map-tag 元素上定义的任何 z-index。其次，您似乎有堆叠上下文的问题。看看css spec 并仔细阅读，因为 z-index，IMO，过于复杂。

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