Z-index not working with multiple absolute positioned elements

Question

I have a fairly simple interactive map with a bunch of "pins", which upon hovering over display a corresponding "tag".

CSS (irrelevant properties omitted):

#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 (only included one pin div for obvious reasons):

<div id="map">

    <div id="map-pin-1" class="map-pin">
        <div class="map-tag"></div>
    </div>

</div>

The issue is that the tags, despite giving them any sufficiently high z-index value, will not appear above all the other pins. It seems that they will only appear above the pins which are above the specific tag 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 appear above the tag.

Any suggestions?

Answer 1

First, I don't see any z-index defined on the map-tag element in your code sample. Second it appears you have an issue with stacking context. Take a look at the css spec and read carefully because z-index, IMO, is overly complicated.

Also one thing that helps me when working with z-index is the "Inspect element" option in Firefox. If you select an element to inspect you will see in the lower right corner a "3-D" option. Click that and you can visualize the stack order better.