堆叠div和openlayers矢量层

Question

我有一个openlayers地图，还有一个div，其中包含一些有关在地图上被鼠标悬停的元素的信息。 openlayers事件触发显示或隐藏div，但div不是开放层地图的一部分。

我遇到的问题是地图图层堆叠在div的前面。 我希望它们堆叠在div后面。 我不完全了解openlayers堆栈的工作原理，并且在我发现的文档中没有任何说明，该说明在不属于地图的DOM元素的上下文中解释了堆栈。

有人能帮我一下吗？ 随后是CSS和HTML。 Openlayers存在于map-id div上。

HTML：

<div id="combat-contentBox">
     <div id="map-id"></div>
     <div id="ship-info" class="ui-widget hidden"></div>
     <div id="tileproperties"></div>
</div>

CSS：

#map-id {
    width: 761px; 
    height: 598px;
    float:left;
    margin:0;
    background-image:url('../../map/selfgraphics/background3.jpg');
    z-index: -25;
}

#ship-info {
    align: center;
    position: absolute;
    width: auto;
    bottom: 5px;
    z-index: 500;
    text-align: center;
    background: #000000 url(../../library/externallibraries/jqueryui/css/dark-hive/images/ui-bg_dots-small_25_000000_2x2.png) 50% 50% repeat;
    color: #ffffff;
    border: solid grey 1px;
    padding: 5px;
}

就像我上面说的，openlayers从map-id div堆栈中的向量层覆盖在ship-info div上，但是我很确定map-id div本身堆叠在ship-info div的后面，因为map-id背景堆叠在ship-info div后面。 为什么会这样，如何将ship-info div带到开放层矢量层的前面？

谢谢。

Answer 1

我终于找到了答案。 这是因为矢量是由OpenLayers javascript创建的“地图视口” div设置样式的。 如果您为视口的z-index设置样式，则图层将落入适当位置。

div.olMapViewport {
     z-index: 0;
}