title: How to display text on fixed screen location in openlayers 3
body: <p>I use the following code to display coordinates as mouse moves on a map.
  Binding event</p>
  
  <pre><code>...
  map.on('pointermove', getCoordinates);
  ....
  </code></pre>
  
  <p>and displaying coordinates</p>
  
  <pre><code>function getCoordinates(evt) {
    var out = ol.coordinate.toStringHDMS(evt.coordinate);  
    $('#coordinates').text(out);
  }
  </code></pre>
  
  <p>The result is like</p>
  
  <p><a href="https://i.stack.imgur.com/s3QTh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s3QTh.png" alt="enter image description here"></a></p>
  
  <p>What I want to do is move the div, where the coordinates are displayed, on the map and ideally at the lower left map corner, something like this.</p>
  
  <p><a href="https://i.stack.imgur.com/7EyP3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7EyP3.png" alt="enter image description here"></a></p>