CSS在移动浏览器上的固定位置
CSS在移动浏览器上的固定位置
提问于 2013-02-13 18:10:18
我不确定我能解释清楚是什么问题，所以请理解。
我有这个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中...当我放大这个页面时，内容工作正常，但是固定的元素停留在相对于屏幕的位置。其他元素都运行得很好。
有什么问题吗？我不知道..。
回答 3
Stack Overflow用户
发布于 2013-02-13 18:14:30
An element with fixed position is positioned relative to the browser window.
您应该提供top: 0;和/或left:0等
Stack Overflow用户
发布于 2013-02-13 18:54:57
在此代码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;
}Stack Overflow用户
发布于 2013-04-25 18:35:38
大多数移动浏览器都有固定定位的问题。尝试使用带有data-position="fixed“属性的jQuery移动框架。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14851036
复制相关文章
相似问题