OpenLayers - HTML DIV overlay

Viewed 12377

I'm using OpenLayers to display a map on a standard HTML page, and I want to create a div that sits on top of the map. However, the div always seems to be obscured by the map tiles.

I believe there is a way to add elements to the map itself, but in this case that isn't a viable option since the div will potentially float partially over the map, and partially over other page elements.

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

That is the basic HTML. What CSS values do I need to add to either DIV to make this possible?

3 Answers

edit this as needed

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