OpenLayers - HTML DIV Overlay

Question

I am 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, a div always seems shaded by maps.

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

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

This is basic HTML. What CSS values ​​do I need to add to either a DIV to make this possible?

Answer 1

add z-index

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

Answer 2

Another internal method for this is to use this css:

 div.olMapViewport { z-index: 0; }