title: CSS positioning independently of other overlapping elements (without position: absolute)
body: <p>I'm trying to create some cool CSS animated clouds. It works perfectly on modern desktop web browsers, but has issues with MobileSafari on iOS 7.</p>
  
  <p>The code I'm using involves cycling clouds from <code>margin-left</code> <code>0%</code> to <code>100%</code>, to <code>-100%</code>, and back to <code>0%</code>. This causes the browser window to be stretched, with a horizontal scrollbar appearing at the bottom. <code>overflow-x: hidden</code> solved it.</p>
  
  <p>However, MobileSafari doesn't seem to support <code>overflow-x</code> properly, resulting in a stretched screen with an unneeded scrollbar on iOS. The clouds currently have <code>position: absolute</code> to move independently of each other, but I'm noticing setting <code>position</code> to <code>relative</code> fixes this issue on iOS. However, that brings me back to the original problem that absolute position fixed, which was randomly overlapping clouds. I'm wondering if there's anyway to have elements move independently of each other without absolute positioning.</p>
  
  <p>The website is <a href="http://team178.github.io/DreamNext" rel="nofollow">http://team178.github.io/DreamNext</a></p>
  
  <p>Let me know if this explanation needs to be clearer. Thanks.</p>