Я работаю над довольно сложным веб-приложением в Ext с API карт Google v3.У меня есть большой выбор маркеров с метками (используется класс MarkerWithLabel версии 1.1.5), и я использую MarkerManager.
Проблема в том, что у меня есть класс маркеров (путевых точек), который я хочу позади мои другие маркеры, когда они перекрываются.
Я пытался заставить z-индекс опуститься ниже, чем у других маркеров, и, по словам инспектора Firebug DOM, мне это удалось.Тем не менее, они все еще появляются впереди.Это верно для FF и Chrome (мне не нужно тестировать другие браузеры).
Я очень внимательно изучил HTML, созданный средством просмотра DOM.Странно то, что Firebug показывает, что соответствующие узлы исчезли, как если бы они были скрыты, но это не так.
Следующее копируется и вставляется из инспектора DOM (с удалением идентифицирующей информации).Маркер путевой точки - это тот, у которого z-индекс 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>
Запись всего этого дала мне некоторые идеи, но я до сих пор не решил их.Интересно, все ли вложенные div с их собственными z-индексами являются проблемой ??