CODEWITHSUNDEEP
openlayers
Barguast
Barguast

Reputation: 6186

OpenLayers - HTML DIV overlay

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?

Upvotes: 11

Views: 13663

Answers (3)

snack overflow
snack overflow

Reputation: 184

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>

Upvotes: 0

Ilia Choly
Ilia Choly

Reputation: 18557

add a z-index

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

Upvotes: 10

the_skua
the_skua

Reputation: 1291

Another internal method for doing it is to use this css:

div.olMapViewport {
     z-index: 0;
}

Upvotes: 5

Related Questions