绝对定位模拟固定定位效果...

Posted 上山打松鼠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绝对定位模拟固定定位效果...相关的知识，希望对你有一定的参考价值。

今天下班,突然发现同学在群里求救解决固定定位在移动端偏移的问题,本屌丝猛地一颤:那一天,我终于回想起来了,曾经一度被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>

 

以上是关于绝对定位模拟固定定位效果...的主要内容，如果未能解决你的问题，请参考以下文章

绝对定位模拟固定定位

WEB学习 -相对定位绝对定位固定定位z-index

CSS-定位

CSS代码片段

CSS代码片段

讲讲相对定位、绝对定位、固定定位的理解？