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移动框架。

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

3 个答案: