title: Weird Overlap of Elements in iOS (PhoneGap)
body: <p>I'm working on an iOS/PhoneGap project. I have a weird overlap issue in iOS (screenshot from iPad):</p>
  
  <p><img src="https://i.stack.imgur.com/ZNhIs.png" alt="Screenshot from iOS"></p>
  
  <p>The "Select Status" popover is <code>position: absolute, z-index: 35</code>. The website link is doesn't have a position specified (so <code>static</code>) and no z-index specified.</p>
  
  <p><em>It makes no matter if the address link is random text with no link, or a link (as captured), it still happens.</em></p>
  
  <p>Here's what it looks like in Chrome (as expected) (taken on a retina Mac, so it's huge):</p>
  
  <p><img src="https://i.stack.imgur.com/FvLje.png" alt="Picture is correct is Chrome"></p>
  
  <p>I have tried tweaking the z-indexes all day long in Safari's console on the iPad with no effect. <strong><em>It does not seem to be a "simple" z-index issue.</em></strong> So please don't just say "adjust z-index."</p>
  
  <p><strong>[edit]</strong> To be specific, I have tried setting the <code>z-index</code> of the popover to <code>5000</code> and the web address to <code>-10</code> (giving it several different <code>position</code>s), and I have checked every ancestor of both elements to make sure none of them have <code>z-index</code>es (and they didn't). I even tried giving a couple of the ancestors of the popover <code>position</code>s and <code>z-index</code>es. Nothing ever changed. (And lest it is brought up, I did try changing <code>color</code>s and stuff, just to make sure my changes <em>were</em> making it to the page.)</p>
  
  <p>Thanks.</p>