[GIS] openlayers display Control.MousePosition on div.olMap

cssopenlayers-2

I have a map displayed in a div.
I have a small div named coordexterne displaying mouse position.
I try to put the small div on the map so to speak above the map. Until now, the small div is always under the map so it is unvisible, whatever i do in the css.

Any help ?

html :

<body>
  <div id="map" class="olMap">
    <div id="coordexterne"  ></div>
 </div>
</body>

css :

div.olMap {
border: 2px solid black;
box-shadow: 10px 10px 5px #888888;
position: relative;
 }

#coordexterne {
font-family: Verdana ;
font-size: 10px;
text-align: right ;
width: 250px;
height: 15px ;
line-height: 10px;
position: absolute ;
box-shadow: 10px 10px 5px #888888;
background-color: #6190FB ;
float: right;

}

enter image description here

Best Answer

Try using a z-index property as described on http://www.w3schools.com/cssref/pr_pos_z-index.asp

for example 

#coordexterne {
  ...
  z-index: 999;
  ...
}

See fiddle http://jsfiddle.net/nzcktv9e/ , play with the z value and click run again to see the effect

Related Question