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

Answer 3

根据需要编辑

  <div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
  <input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
  <button type="button">Search</button>

OpenLayers - HTML DIV覆盖

3 个答案: