【发布时间】：2012-04-02 15:53:20
【问题描述】：
我正在使用 Google maps API v3 在 Ext 中开发一个非常复杂的 Web 应用程序。我有大量带有标签的标记（使用 MarkerWithLabel 1.1.5 版），并且我使用 MarkerManager。
问题是我有一类标记（航点），当它们重叠时，我希望它们在我的其他标记之后。
我试图将 z-index 强制低于其他标记，根据 Firebug DOM 检查器的说法，我成功了。然而，他们依旧出现在了面前。在 FF 和 Chrome 中确实如此（我不需要测试其他浏览器）。
我已经非常仔细地浏览了 DOM 查看器生成的 HTML。奇怪的是，Firebug 将相关节点显示为褪色，就好像它们被隐藏了一样，但事实并非如此。
以下内容是从 DOM 检查器中复制和粘贴的（已删除标识信息）。航路点标记是 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>
把这一切写出来给了我一些想法，但我仍然没有解决它。我想知道是否所有具有自己 z-indexes 的嵌套 div 都是问题？？
【问题讨论】：
-
PS 看起来不正确的嵌套只是因为 dom 检查器复制/粘贴的方式
-
已解决：问题出现了 - 显然 - 因为重要标记上的图标由两部分组成，标记和阴影。航路点只是一个标记，因此无论我如何更改 z-index，它都会遮挡主要标记的阴影部分。因此，我将航路点标记设为透明，并使用阴影作为“图钉”。这为我修好了。我仍然无法解释 z-index 现象，但它现在有效，所以我不在乎！
标签： javascript css google-maps extjs google-maps-api-3