title: Openlayers: Is there a way to create a *fixed* overlay?
body: <p>I am using Openlayers 3.</p>
  <p>I am trying to display a <em>fixed</em> graticule showing the center of the view on a map with a   <a href="https://openlayers.org/en/latest/examples/popup.html" rel="nofollow noreferrer">popup</a> displayed in an overlay.</p>
  <p>I have created a custom control (by simplifying the <a href="https://openlayers.org/en/latest/examples/custom-controls.html" rel="nofollow noreferrer">example</a>) which displays passively the graticule. Unfortunately, the popup appears <strong>below</strong> the graticule (ie. the popup is <em>hidden</em> by the graticule lines).</p>
  <p>I want the popup to appear <strong>above</strong> the graticule (ie. the graticule lines are <em>hidden</em> by the popup)</p>
  <p>It looks like the overlays and the controls are in a <em>different</em> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" rel="nofollow noreferrer">stacking context</a>.</p>
  <p>This means that I have either to:</p>
  <ul>
  <li><p>Move the popup to the control stacking context, which means that I have to move it every time the center/resolution changes, maybe by listening to <code>change</code> events and adjusting dynamically the popup's CSS</p>
  </li>
  <li><p>Or move the graticule to the overlay stacking context, and find a way to avoid it moving when resolution/center changes, maybe by creating a custom projection.</p>
  </li>
  </ul>
  <p>Any suggestions or pointers?</p>
  <p>Thanks!</p>