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（出于显而易见的原因，仅包含一个引脚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中的“Inspect element”选项。如果选择要检查的元素，您将在右下角看到“3-D”选项。单击它，您可以更好地可视化堆栈顺序。