在移动浏览器上的CSS固定位置

Question

我不确定我能够清楚地说明问题是什么，所以请理解。

我有这样的HTML代码：

<div id="container"> 
    <div id="navbar"> 
     ... 
    </div> 
    <div id="content"> 
     ... 
    </div> 
</div> 

这里是CSS代码：

#container { 
    display: block; 
    width: 640px; 
    height: 480px; 
} 
#navbar { 
    display: block; 
    position: fixed; 
    width: 640px; 
    height: 70px; 
} 
#content { 
    display: block; 
    marign: 70px 0 0 0; 
    width: 640px; 
    height: 410px; 
    overflow-y: auto; 
} 

它适用于台式机和任何Android基地浏览器不错，但在iPhone的Safari ......当我放大这个页面的内容工作正常，但固定的元素保持相对于屏幕的位置。其他每个元素移动都很好。

什么问题？我不知道...

Answer 1

An element with fixed position is positioned relative to the browser window.

你应该给top: 0;和/或left:0等

Answer 2

这个代码尝试http://jsfiddle.net/nandhakumarsri9/bkwLG/

#container { 
    display: block; 
    width: 640px; 
    height: 480px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    position: relative; 
} 
#navbar { 
    display: block; 
    position: absolute; 
    width: 640px; 
    height: 70px; 
    border: 1px solid #F00; 
    box-sizing: border-box; 
} 
#content { 
    display: block; 
    width: 640px; 
    height: 410px; 
    overflow-y: auto; 
    border: 1px solid #00F; 
    box-sizing: border-box; 
    position: absolute; 
    top: 70px; 
} 

Answer 3

大多数手机浏览器有问题，固定定位。尝试使用具有data-position =“fixed”属性的jQuery移动框架。