css position fixedd在手机端有用吗

来源：蜘蛛抓取(WebSpider) 时间：2016-09-10 10:25 标签： 手机端position fixed
手机端 position:不兼容问题
[问题点数：100分，结帖人jbx_jiebaixue]
手机端 position:不兼容问题
[问题点数：100分，结帖人jbx_jiebaixue]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。问题：(javascript)点击手机输入框,fixed属性的底部导航会跑到拼音键盘的上边？
描述:底部导航的nav 使用position：fiexd进行定位，点击网页中的一个文本框之后，拼音键盘弹出，nav就跑到拼音键盘的上边去了，这个有什么好的解决方法吗？解决方案1:position：fiexd底部导航跑到键盘上不是很正常的逻辑吗如果希望被键盘覆盖输入框获取焦点时把fiexd清理掉，失去焦点时在添加上去，或者使用position:算位置也可以解决方案2:猜想，手机原生键盘不属于页面的一部分，键盘出现以后，页面相当于被缩短了，而已。该fixed在底部的东西，还是在页面底部。解决方案3:自己写一个在线输入法，input focus的时候阻止默认键盘弹起，出现自己的键盘。然后输入框在自己在线输入法键盘的下面，这样，输入字的时候谁都不知道输入的是什么。把在线输入法的键盘放到页面最上面就能避免了。百度在线输入法 示例/online.html
以上介绍了“(javascript)点击手机输入框,fixed属性的底部导航会跑到拼音键盘的上边？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1011791.html
上一篇： 下一篇：chrome中position:fixed对z-index的影响
&&&&您可以捐助，支持我们的公益事业。
每天15篇文章
不仅获得谋生技能
更可以追随信仰
chrome中position:fixed对z-index的影响
来源：&阿里巴巴国际UED团队 发布于：&
437 次浏览
&&&&评价：
先看这样一个需求
页面如图：
div A是一个悬浮磁条，固定宽度居中。有个子元素A-child右浮动。浏览器向下滚动时实现下图效果：
B挡住A,A-child挡住B。
正常的实现方式很容易：因为B本身就在A的后面，当A和B都设置了position属性（非static），且没有设置z-index的时候，其层叠关系是后面的元素覆盖前面的元素，这样只需要给A-child设置z-index属性值即可。less代码：
#wrap{position:width: 1200margin: 0height: 100%;
text-align:color:#000000;
font-size:50
#a{position:top: 50width: 950height: 100
background-color:padding: 20
#a-1{position:
font-size:30float:width:100height:100
background-color: #cc0000;
z-index: 1;
#b{position:left: 0top:550
background-color: #0000f6;width: 990height: 100%;
出现的问题
除chrome浏览器以外，IE8+和其它浏览器效果正常（当然IE6,7也有问题）。chrome下如图：
A-child无法覆盖B元素。
后来发现是chrome22+以后的一个改动，参考链接:The stacking
关键内容：
这段话主要说明在什么情况会创建层叠上下文（The stacking context）。
红线部分说的就是移动端webkit的浏览器和chrome22+的浏览器，position：fixed的时候也会创建一个层叠上下文。这里面层叠上下文的概念很重要，z-index的相关内容很多，如果对z-index的使用不清楚，可先参考这篇文章：CSS
z-index 属性的使用方法,z-index详细内容可参考如下系列文章：Understanding CSS
chrome的这个改变就会造成A元素形成一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较，A-child因为设置了z-index属性，所以也会创建一个层叠上下文，但是它的父层叠上下文变成了A，所以它只能在A的内部进行层叠比较。这也就是很多文章中所说的“从父原则”。其它的浏览器，position:fixed不会创建层叠上下文，因此整个页面只有root和A-child两个层叠上下文，所有层叠元素都在root层叠上下文中进行比较。
chrome浏览器这种变动的原因
我的理解就是为了在移动端浏览器滚动时达到性能最优化，使得页面有更强大的响应性。我想其性能提升可能体现在页面滚动渲染的时候，position:fixed的元素当成一个整体的层叠上下文进行比较，而不需要考虑其内部子元素和整个页面其它部分的层叠关系，但是我并未感觉这会带来多大的提升……。而PC端之所以改变是为了不和移动端相悖而产生两个版本。
参考资料：Stacking Changes Coming to position:fixed elements
想过一些解决方案，比如只fixed定位A-child元素，但是在响应式的时候对于始终右浮动的定位计算很麻烦，且需要resize事件不断计算。
最终灵机一动想到一个办法：很简单，当滚动到蓝色区域时，设置A元素的z-index，让它覆盖B元素，同时把A元素的高度设为0，只让A-child显示出来；也可以设置A的visiblity:hidden，A-child的visiblity:visible(opacity代替visible不可以)。less代码：
width: 1200
height: 100%;
text-align:
color:#000000;
font-size:50
width: 950
//height: 100
background-color:
//padding: 20
z-index:1;
font-size:30
height:100
background-color: #cc0000;
//z-index: 1;
background-color: #0000f6;
width: 990
height: 100%;
chrome浏览器和移动端基于webkit的浏览器，position:fixed会创建新的层叠上下我，注意对样式的影响。
关于z-index几点常见问题
1、z-index只有在设置了position为relative,absolute,fixed时才会有效。
2、z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。
3、不要乱用z-index，否则层叠关系会把你搞晕，且难以维护。只在必要的情况下设置，目前我想到的必要的时候只有：悬浮层、负margin产生的覆盖情况。
position:fixed
发现position：fixed不设置left，top的时候，其默认值并非0，0。而是根据其父元素边界确定的，请自行测试，还未具体查看资料。
opacity和visiblity
设置父元素透明，再设置子元素不透明将失效。设置父元素不可见，再设置子元素可见，可以成功。
更多课程...&&&
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
|&京ICP备号&京公海网安备号求助一个移动端position:fixed的问题 ~ 大神请进 ~_前端吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：28,615贴子：
求助一个移动端position:fixed的问题 ~ 大神请进 ~收藏
主要是我在开发一个移动端的web页面，然后发现在ios下，无论是background-attachment:fixed还是position:fixed，都失效了。后来在百度查答案，发现这是ios的问题，不过有一些提示是说可以通过js来解决。于是我发现了这段代码：window.onscroll=function(){$(&#bg&).css(&top&,$(window).scrollTop());}修改好了之后我在ios中打开，发现效果是实现了，只不过当手指触摸滑动背景还是动了，要等手指放开才能执行这个js代码 。。。绕了一大圈，还是没解决 ~ 希望在这里能得到大神的指点 ~ 万分感激 ~
前端培训首选汇道IT培训,大专以上学员&0元入学&,保就业起薪8K!7天免费试听.全日制小班授课,1对1指导,理论+实操,120天精通!汇道教育培养高端it人才!
ios中position没用吗？
iOS我写的position:fixed都有用，没碰到楼主遇到的问题
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或

我要回帖

更多关于 手机端position fixed 的文章

 

随机推荐