I have a simple interactive map with multiple pins that display corresponding tags when hovered over.
CSS (excluding irrelevant properties):
#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 (showing only one pin for clarity):
<div id="map">
<div id="map-pin-1" class="map-pin">
<div class="map-tag"></div>
</div>
</div>
The problem is that the tags, despite having high z-index values, are not displaying above all other pins. They seem to only appear above pins that are positioned higher in the DOM. For example, #map-pin-3 .map-tag will appear above #map-pin-1 and #map-pin-2, but #map-pin-4 will display above the tag.
Any ideas on how to address this issue?