Question

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?

Answer 1

add a z-index

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