I’m working on a pretty complex web application in Ext with Google maps API v3. I have a large selection of markers with labels (using class MarkerWithLabel version 1.1.5) and I use MarkerManager.
The problem is that I have a class of markers (waypoints) that I want behind my other markers when they are overlapping.
I’ve tried to force the z-index down below that of the other markers, and according to the Firebug DOM inspector, I have succeeded. However, they still appear in front. This is true in FF and Chrome (I don’t need to test other browsers).
I’ve been through the HTML generated by the DOM viewer very closely. The odd thing is that Firebug is showing the relevant nodes faded, as if they were hidden, but they are not.
The following is copied and pasted from the DOM inspector (with identifying info deleted). The waypoint marker is the one with z-index 100/101.
<div style="z-index: 105; position: absolute; left: 0px; top: 0px;">
<div class="markerselected" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 2px; margin-top: 2px; left: 554px; top: 271px; z-index: 1000001; display: block;" onselectstart="return false;" ondragstart="return false;" >aaaaa</div>
<div class="markerLabel" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 2px; margin-top: 2px; left: 565px; top: 279px; z-index: 280; display: block;" onselectstart="return false;" ondragstart="return false;" >bbbbb</div>
<div class="markerLabel" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 2px; margin-top: 2px; left: 544px; top: 277px; z-index: 278; display: block;" onselectstart="return false;" ondragstart="return false;" >ccccc</div>
<div class="markerLabelWP" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 2px; margin-top: 2px; left: 570px; top: 259px; z-index: 101; display: none;" onselectstart="return false;" ondragstart="return false;" >aaaaaa</div>
<div class="gmnoprint" style="width: 30px; height: 30px; overflow: hidden; position: absolute; left: 535px; top: 235px; z-index: 265; opacity: 0.01; cursor: pointer;" >
<div class="gmnoprint" style="width: 30px; height: 30px; overflow: hidden; position: absolute; left: 539px; top: 241px; z-index: 1000000; opacity: 0.01; cursor: pointer;" >
<div class="gmnoprint" style="width: 30px; height: 30px; overflow: hidden; position: absolute; left: 550px; top: 249px; z-index: 279; opacity: 0.01; cursor: pointer;" >
<div class="gmnoprint" style="width: 30px; height: 30px; overflow: hidden; position: absolute; left: 529px; top: 247px; z-index: 277; opacity: 0.01; cursor: pointer;" >
<div class="gmnoprint" style="width: 32px; height: 32px; overflow: hidden; position: absolute; left: 554px; top: 227px; z-index: 100; opacity: 0.01; cursor: pointer;" >
</div>
Writing all this out gave me some ideas, but I still haven’t solved it. I wonder if all the nested divs with their own z-indexes is the problem??
For better understanding z-index: https://developer.mozilla.org/en/Understanding_CSS_z-index (7 links inside)