OpenLayers-HTMLdiv覆盖

我使用OpenLayers在标准HTML页面上显示地图，我想创建一个位于地图顶部的div。但是，div似乎总是被地图分幅遮住

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

这是基本的HTML。为了实现这一点，我需要向任一DIV添加哪些CSS值

添加一个z索引

---

另一种内部方法是使用此css：

div.olMapViewport {
     z-index: 0;
}

根据需要编辑此文件

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

搜寻

它似乎没有什么区别。请擦掉它，是的，它确实有区别。谢谢两个答案都是+1，因为它们工作得很好。就我个人而言，我更喜欢这个。顺便问一句，你们这些家伙，skua或@ilia choly，知道视口在哪里将其

z-index

设置为大于0的值，就像div.olMap将

z-index

设置为0一样？不知道。很抱歉，我无法提供更多帮助。这不是一个安全的解决方案，因为如果zIndex现在或将来由OpenLayers在javascript中定义，css将被忽略……请解释为什么以及如何解决这个问题