在移動瀏覽器上的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移動框架。