Z索引不适用于多个绝对定位的元素

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规范并仔细阅读，因为IMO的z-index过于复杂。

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