OpenLayers - HTML DIV覆盖

Question

我正在使用OpenLayers在标准HTML页面上显示地图,我想创建一个位于地图顶部的div.然而,div似乎总是被地图图块遮挡.

我相信有一种方法可以将元素添加到地图本身,但在这种情况下,这不是一个可行的选项,因为div可能会部分浮动在地图上,部分浮动在其他页面元素上.

<div id="maphost" style="width: 100%; height: 100%" />
<div id="overlay" />

这是基本的HTML.我需要将哪些CSS值添加到DIV以使其成为可能？

Answer 1

添加z-index

<div id="maphost" style="width:100%; height:100%; z-index: 0"></div>
<div id="overlay" style="z-index:9999"></div>

Answer 2

执行此操作的另一种内部方法是使用此 css：

div.olMapViewport {
     z-index: 0;
}