header的css中加入position:fixed这句,导航栏就错位了怎么回事啊_百度知道
提问者采纳
　　这位网友你好，属性position:是相对body元素设置的，如果你是想让导航栏固定在顶部的话可以用这个属性。导航栏的宽度设置为100%。具体设置方法如下：.header{&&position:&&left0;&&top:0;&&width:100%;}
fixed属性设置之后会脱离文档流，你需要设置body的padding-top来解决，链接不能用可能是z-index设置的较小，设置一个比较大的值试试。箭头问题自己去找代码，直接删掉或者设置display:。
我在css里面用display隐藏了箭头，后来发现这个界面，每7、8秒会闪一下，像是在刷新一样，这是怎么回事啊
不太清楚，你自己看一下js代码吧。
提问者评价
前端工程师
其他类似问题
为您推荐：
导航栏的相关知识
其他1条回答
.header{positon:width:100%;z-index:2;}
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁您所在的位置： &
CSS中position:fixed固定定位用法指导
CSS中position:fixed固定定位用法指导
CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative，这里向大家介绍一下position:fixed固定定位的用法，希望对你的学习有所帮助。
CSS中position属性有4种可选值:static,relative,absolute,fixed,用于定位html元素的位置，并影响元素块生成的方式。这里向大家描述一下position:fixed 的使用，此属性元素的定位方式同absolute类似，但它的包含块是视区本身。
使用CSS的position:fixed
Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成。
Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。
position:fixed 相对于窗口的固定定位
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它答应框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
注意：IE6不支持CSS中的position:fixed属性。
我们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明&IE5.5及NS6尚不支持此属性&吧。
前段时间，在做一个项目时需要使一个层相对于浏览器边框固定，那时用position:absolute试了下，发觉absolute是对网页边框而言的。后来，上网查了一些根据滚动条的移动，动态地改变left和top的值的JavaScript语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。
且看下面的代码：
&type=&text/CSS&&&!-- &#help{ &&&&&width:30 &&&&&height:20 &&&&&background-color: &&&&&position: &&&&&left:60 &&&&&top:100 &} &--&&
我们用上面这段代码来定义页面上的一个层&help&（id=&help&）。这样就能实现我们想要的效果了。在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
我原本是个C程序员，阴差阳错，步入Java大门，转眼十余年...
又是一周匆匆而过。上周五、周六两天，2013年51CTO云
十一归来，貌似大家都没有什么劲头。本周五，为期两天
《待字闺中：编程面试题集》集合最新最全的面试经验和
本书作为思科认证体系中的入门级教材，主要讲述了网络的基本知识和思科设备的基本命令，以及路由、交换等深层次网络知识的入门知
51CTO旗下网站您访问的网站HTTPS超出配额 - Sina App Engine您所访问的网站发生故障！您访问的网站HTTPS超出配额。当前访客身份：游客 [
当前位置：
一个WebApp要做的像个App，多半会需要一个固定位置的头部、工具栏之类的效果，多半你会想到position:然后发现 哎呀 ，iOS的Safari上position:居然无效
解决问题前先来看看问题是怎样产生的：
Apple是这样解释的
&&& Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position “fixed” to the viewport can end up outside the viewable content area, offscreen.
这里有个关键的东西叫做viewport，你经常在页面的头部里可以见到它：
&meta name=&viewport& content=&width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no& /&
想起来了吧，就是它让你的页面不会像在桌面上那样显示，玩过windows的放大镜功能吧，
你可以把viewport想象成一个类似的放大镜，fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，原来的网页还好好的在那，fixed的内容也没有变过位置，所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的。换个角度，如果所有fixed的元素都相对屏幕固定，那那些桌面版的网页在手机上还能看吗。
弄清楚原因，接下来就是如何解决了，这里我参考了比较有代表性的两种解决方案。
jQuery Mobile
之前用这个框架做东西的时候就觉得它对fixed的处理很奇怪(demo)，理解了上述viewport的模型后会觉得他的想法很简单也很自然，既然fixed的元素不会随viewport移动而移动，那就用相对定位让其随着viewport的移动改变位置，通过webkit的touch事件我们可以很方便的获取当前手指位置的坐标，据此计算偏移量并改变fixed元素的top偏移量，可以模拟元素fix在viewport的效果。
尽管touchmove事件可以让你随时获得当前偏移量，理论上可以做到平滑的滚动，但由于手指触发事件到浏览器完成渲染是需要时间的，如此模拟出的效果必定做不到理想中的fixed效果，更重要的是touchend事件后的scroll阶段，在这个阶段iOS会将DOM操作挂起(其API的ScrollEvent部分有说明)，即会造成页面无法即时渲染。于是jQueryMobile就决定在整个viewport移动过程中(包括touch与scroll)让fixed的元素消失，scroll事件结束后再fadeOut。总之就是，很 奇 怪。
Sencha Touch/TWITTER
Twitter的处理方式则创新得多，效果也更加完美(后来发现Sencha Touch也是这样处理的)，因为这个方案实现了真&fixed。所谓真&fixed，是因为在手指移动的过程中，不管是fixed元素的位置还是viewport的位置都没有改变。具体做法是监听body的touchmove事件，获取偏移量以改变内容元素的位置，并用event.preventDefault()阻止浏览器的默认scroll动作，来看代码：
&div class=&tw-scrollview-host& style=&min-height: 1018 -webkit-transform: translate3d(0px, -22px, 0px);&&....&/div&
这里用translate3d只是因为仅有这个CSS属性iOS是调用硬件加速的…. 但是由于其阻止了浏览器的默认滚动，所以当touch事件结束后内容是不会惯性滚动的，于是又需要继续改变偏移量来模拟Scroll事件，这里就涉及到Scroll算法的问题了，要考虑手指移动的速度、阻尼的大小跟边界情况等等，我没有找到这部分的代码，也没有搜到任何相关文章，如果有人了解可以分享一下。
总的来说，Twitter Sencha Touch的方法在效果上更流畅，也更符合一般人的心理模型，如果硬要说缺点的话，我觉得这种实现太“不原生”了，几乎完全抛弃了移动浏览器的viewport模型，大兴土木地用CSS3与js模拟的scroll在执行效率与效果上与原生的差别也有待考究。
有个好消息:
iOS5即将更好的支持position:属性，加上android早在2.2就已经实现，以后要实现类似效果就不用再这么折腾了。
更好的消息：
不管用jQuery.mobile还是Sencha Touch ，这两框架都太重了，针对于国内的3G网络，下载框架+暄染页面都得等老半天，后来，我找着了了iScroll,它的实现原理跟Sencha Touch一样，效果流畅，还不卡，再后来，我用iScroll做了手机站： ，把平时喜欢的冷笑话和内涵段子收集在了一起~~~等公车，坐地铁时看一看，无聊时乐一乐~~~
共有1个评论
<span class="a_vote_num" id="a_vote_num_
position: 这个在Android平台上还是有问题, 例如滚动不流畅; 然后导致固定的元素 悬空之类的.
--- 共有 3 条评论 ---
: 固定头部时,页面上用positioin:fixed是会有问题，所以才会有iScroll这个JS来代替position:fixed
(3年前)&nbsp&
你用的是 position:absolute, 例如滚动时 超过页面高度 需要固定页头时: position:fixed 则会有问题.
(3年前)&nbsp&
用iScroll4之后，就没有些问题了~~经测试iPhone4s和Andriod都滑动相当流畅，你可以用手机测试一下
(3年前)&nbsp&
更多开发者职位上
有什么技术问题吗？
黄平俊的其他问题
类似的话题移动web项目开发问题笔记 - kjah - ITeye技术网站
博客分类：
前阵一直在做的移动web项目项目已进入尾声,以下总结下在项目中遇到的问题和技术要点
开发问题及要点
1. viewport 窗口适应
通过设置viewport使页面适应设备的宽度
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&
user-scalable设置用户是否可以修改比例
minimum-scale 最新缩放比例
maximum-scale 最大缩放比例
其他：window.devicePixelRatio 设备物理像素和网页像素-设备无关像素device-independent pixels (dips)的比例
2. js框架的选择
考虑框架体积、学习成本和移植问题,备选框架zeptojs quojs,这两个框架都兼容大部分jQuery API，考虑quojs太新，淘宝手机版也是用的zepto最后敲定zeptojs
3. touch事件
手机触屏web和传统web最大不同就是触摸 需要学习三个基本的触摸事件
touchstart touchmove touchend 对应mousedown mousemove mouseup
zeptojs中进行了封装:tap singleTap doubleTap longTap swipe swipeLeft swipeRight swipeUp swipeDown
在触摸事件对象中增加了多点的相关对象和属性.
如:event.targetTouches[0].pageX 获得第一个点的页面水平位置
4. 关键属性不支持 position:fixed overflow:auto
在项目中需要有个一工具条一直浮在屏幕下方,
使用position:fixed 等效于position:absolute
考虑将上部区域增加滚动条实现效果,发现 overflow:auto 等效于overflow:hidden
在手机上区域（div等块）不会出现滚动条.
解决办法：使用iscroll4
虽然iscroll解决了滚动条的问题,但是也带来了更麻烦的问题
iscroll兼容性及常见问题处理
由于要通过touch事件模拟浏览器的滚动,iscroll阻止了滚动区域内的所有浏览器默认动作导致输入框焦点无法进入等问题。
在iscroll初始化时,注册以下方法,排除掉需要浏览器默认动作的元素
onBeforeScrollStart: function(e) {
var target = e.
while (target.nodeType != 1) target = target.parentN
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'BUTTON'){
e.preventDefault();
Iphone下问题:
1) 由于使用iscroll页面本身的滚动条就不能出现,导致滚动时浏览器地址栏一直显示.
在页面加载完后通过类似
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
把地址栏顶上去
2) Iphone下拖动input textarea时会出现浏览器默认的滚动条并触发回弹效果
按说在上边onBeforeScrollStart中已经对TEXTAREA等做过处理了这里为什么会出现这种情况?
经过实验在iphone里TEXTAREA 的touch事件都不能正确触发,在其父对象中注册也不能监听到.
情况比较复杂,使用pointer-events,让它们不能响应事件这样拖动的时候实际是拖的它们的父元素,但是会造成焦点无法进入的问题,所以在touchstart的时候再瞬间恢复一下。
$('input,textarea').css('pointer-events','none');
$(document).on('touchstart',function(e){
$('input,textarea').css('pointer-events','auto');
}).on('touchmove',function(e){
e.preventDefault();
$('input,textarea').css('pointer-events','none');
}).on('touchend',function(){
setTimeout(function() {
$('input,textarea').css('pointer-events','none');
ps:这种固定浮动的问题在传统web开发时就一直烦扰着我们(兼容问题),到移动web上更加麻烦,最好能从设计上避开这些问题，另外第三方框架的问题也会很头疼。
5. 屏幕方向判断
移动浏览器上提供了onorientationchange事件和window.orientation属性帮助屏幕方向的判断,但这貌似很简单的功能里也有坑, 注意onorientationchange触发的时候页面并没有转过来这时候获取宽高是不对的,需要在resize事件中获取。
6. html5 动画
动画效果已经不再用setTimeout setInterval二兄弟了, 使用CSS3 transition 就可以了,兼容的问题就交给框架吧zeptojs中动画都是使用这个实现.
变换移动的效果可以考虑使用transform: translate3d可以开启硬件加速
之前一个效果使用的margin来实现的,在android上没问题在ios上竟然会卡,换translate3d问题解决,虽然获取值麻烦点,随手粘个获取x的值:
scroller.css('-webkit-transform').match(/translate3d\((.*?)px,.*?\)/i)[1]
7. android2.X多点问题
试了很多声称支持pinch的框架在android2.x都残念
根本原因是浏览器event.targetTouches中只能返回一个触点,见以下
8. android2.X获得分辨率问题 screen.width/height
screen.width/height不能正确返回设备的像素数
9.android原生浏览器input textarea输入时滚动条乱动
页面中有节点样式包含
-webkit-transform: translate3d(0px, 0px,0px) 时会发生
不使用translate3d() 改为 translate(0px, 0px) translateZ(0px);
10.iphone5 webapp不能全屏,在状态栏上部出现黑色区域
解决办法如下(包含欢迎图片解决方法):
&!-- standard viewport tag to set the viewport to the device's width
, Android 2.3 devices need this so 100% width works properly and
doesn't allow children to blow up the viewport width--&
&meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /&
&!-- width=device-width causes the iPhone 5 to letterbox the app, so
we want to exclude it for iPhone 5 to allow full screen apps --&
&meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" /&
&!-- provide the splash screens for iPhone 5 and previous --&
&link href="assets/splashs/splash_1096.png" rel="apple-touch-startup-image" media="(device-height: 568px)"&
&link href="assets/splashs/splash_iphone_2x.png" rel="apple-touch-startup-image" sizes="640x960" media="(device-height: 480px)"&
浏览: 72925 次
来自: 北京
未捕获的安全错误：阻止了一个域为null的frame页面访问另 ...
根本运行不了
多谢楼主解惑