绝对定位模拟固定定位效果...
今天下班,突然发现同学在群里求救解决固定定位在移动端偏移的问题,本屌丝猛地一颤:那一天,我终于回想起来了,曾经一度被ios固定定位失效所支配的恐怖,还有被市场妹子一脸嘲讽的看着的那份屈辱...(本屌意淫一下巨人).
真是情况就是,ios对固定定位的支持有点奇葩,当固定定位的层里有input一类的能调动虚拟键盘的元素时,一旦用户聚焦这些元素,固定定位的层级中的元素会发生位移,也就是俗称的页面错乱了,本屌当时寻遍网上各种方案,试了大半天时间(其实,就是因为没钱穷屌丝一枚,没有水果手机,每次测试都要厚着脸皮去找市场妹子借人家的大水果机,耽误时间),最后才选了个相对折中(厚着脸皮,就差给市场妹子跪下了,才在人家一脸无奈的表情中,接收了我那丑成狗的解决方案)的方案解决,其实最好的方案,就是尽量少在固定定位的层中用到input这类的元素.
其中用的就是绝对定位替换固定定位,同时,在最外面加一个层和其进行隔离,这里由于时间原因(现在依旧没有苹果手机,没办法演示),先不做具体介绍,以后会在这篇博文下面继续续写其中用的一些方案.
这里先放上绝对定位替换固定定位,方法很简单,很好理解:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绝对定位替换固定定位</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{padding: 0;margin: 0;} html,body{ width: 100%; height: 100%; } .wrap{ width: 100%; height: 100%; overflow: hidden; position: relative; } .content_box{ width: 100%; height: 100%; overflow: scroll; } .content{ height: 2000px; background-color: #3388FF; } .fixed_box{ width: 100%; height: 50px; position: absolute; bottom: 50px; text-align: center; line-height: 50px; background-color: #fff; color: #000; font-size: 24px; } /*这里就是多套一个层,最外层作为模拟固定定位元素的定位基准层,其和真正的内容层是兄弟元素,相当于在原有的内容层外套上了这样的一个结构,实现绝对定位模拟固定定位*/ /*这种结构有点类似曾经写过的轮播图结构,思路都差不多,很好理解,可以用来解决ios对固定定位支持不好的情况,但是还需要结合具体情况进行优化*/ </style> </head> <body> <div class="wrap"> <div class="content_box"> <div class="content">原本内容</div> </div> <div class="fixed_box"> 固定定位 </div> </div> </body> </html>
