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在ship-info div上传递来自map-id div堆栈的图层，但我很确定map-id div本身是在ship-info div后面堆叠的，因为地图-id背景堆叠在ship-info div后面。为什么这样，我怎样才能将ship-info div带到开放层矢量图层前面？

感谢。

Answer 1

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

div.olMapViewport {
     z-index: 0;
}

堆叠div和openlayers矢量图层

1 个答案: