堆疊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;
}