OpenLayers – Custom Control Div Position and Visibility

openlayers

I want to createa a sample custom button to appear on my openlayers map.

 <div id="map" class="map">
   <div class="ol-custom ol-unselectable ol-control">
     <button class="ol-zoom-in" type="button" title="Show Me">O</button>
   </div>
 </div>

And my css is like this

.map {
    width: 100%;
    height: 300px;
}
.ol-custom{
  top: 4.5em;
  left: .5em;
}

But my custom button does not appears. I used openlayers css classes that used for other controls but did not work.

Demo

Best Answer

Your CSS should be like this (by adding the z-index), it's also preferable to add (position) but not required. 

.map {
    width: 100%;
    height: 300px;
}
.ol-custom{
   z-index: 1000;
  top: 4.5em;
  left: .5em;
}

Your DEMO

The Z-index determines the rendering order; [Example]

Related Question