OpenLayers - HTML DIV叠加层

Question

我正在使用OpenLayers在标准HTML页面上显示地图，并希望创建一个位于地图顶部的div。但是，该div似乎总是被地图瓦片遮挡。

我相信有一种方法可以向地图本身添加元素，但在这种情况下，这不是可行的选择，因为该div可能会部分浮动在地图上，部分浮动在其他页面元素上。

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

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

- Barguast

Answer 1

添加 z-index 属性

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

- Ilia Choly

---

似乎没有什么区别。 - Barguast

没事，它确实可以。谢谢！ - Barguast

Answer 2

另一种内部方法是使用以下CSS：

div.olMapViewport {
     z-index: 0;
}

- the_skua

---

两个答案都很好用，我个人更偏向于这一个。顺便问一下，你们，the_skua和@ilia choly知道viewport从哪里获取一个大于0的z-index值吗？因为div.olMap的z-index被设置为0。 - Boro

不知道。抱歉我不能提供更多帮助。 - the_skua

这不是一个安全的解决方案，因为如果zIndex现在或将来由OpenLayers在JavaScript中定义，CSS将被忽略... - Karl.S

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>

- snack overflow

---

请解释为什么以及如何解决这个问题。 - phoenixstudio