title: Best way to keep a portion of the page (a round button / PNG) fixed over JQuery Mobile pages?
body: <p>In my project that uses JQuery Mobile, I would like to have a round PNG button stay fixed in the lower-right corner of the screen (correct handling of mobile orientation changes, etc.), while JQuery Mobile page content is displayed underneath. The button should stay fixed in the lower-right corner and not move when the content underneath is scrolled or JQuery Mobile pages are switched from one to another.</p>
  
  <p>On an empty page without JQuery, this straight CSS appeared to work:</p>
  
  <pre><code>img.roundButton {
    position: absolute !important;
    bottom: 5px;
    right: 5px;
    z-index: 99;
  }
  </code></pre>
  
  <p>The above ceases to work inside a JQuery doc outside of the pages (and inside a page it disappears when the page does and reappears as a part of the new page - whereas I need it to stay put through any transitions and page (data-role="page") loads.</p>
  
  <p>I've tried data-position="fixed" data-fullscreen="true" (for img or for div data-role="footer") and it does not work - furthermore on an iPhone the vertical position is miscalculated taking into account the web address toolbar, leaving the button above the proper corner position by the distance equal to the width of the Mobile Safari bar in descended state.</p>
  
  <p>Any advice would be greatly appreciated.
  Sasha</p>