position absolute relative的区别

最新推荐文章于 2023-10-21 09:42:12 发布

daisy_lisixi

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量339

点赞数

分类专栏：布局文章标签：样式属性

本文链接：https://blog.csdn.net/daisy_lisixi/article/details/76048325

版权

布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

position absolute relative的区别
TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)

默认情况下position:static

absolute不知页面的时候不会错位，不会根据浏览器的分辨率变化
absolute的定位满足两个条件：
以父元素的relative相对定位。
设置tbrl

relative相对定位，他是默认参照父级的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

position:fixed　相对于窗口的固定定位
IE6不支持CSS中的position:fixed属性

粘性布局属性position:sticky，当然兼容性还不太好
position:sticky实现iOS6+下的粘性布局

解决input在ios中点击键盘，键盘谈起，布局错乱

<body class="layout-scroll-fixed">
    <!-- fixed定位的头部 -->
    <header>

    </header>

    <!-- 可以滚动的区域 -->
    <main>
        <div class="content">
        <!-- 内容在这里... -->
        </div>
    </main>

    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滚动 */
    overflow-y: scroll;
}

main .content {
    height: 2000px;
}

但是如果在手机上实际测试一下，会发现 main 元素内的滚动非常不流畅，滑动的手指松开后，滚动立刻停止，失去了原本的流畅滚动特性。百度一下弹性滚动的问题，发现在 webkit 中，下面的属性可以恢复弹性滚动。

-webkit-overflow-scrolling: touch;
在 main 元素上加上该属性，嗯，丝般顺滑的感觉又回来了！

参见：http://efe.baidu.com/blog/mobile-fixed-layout/
参考：http://www.jianshu.com/p/e56598cd3c29

daisy_lisixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position absolute relative的区别

position absolute relative的区别 TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)默认情况下position:staticabsolute不知页面的时候不会错位，不会根据浏览器的分辨率变化 absolute的定位满足两个条件：以父元素的relative相对定位。设置tbrlrelative相对定位，他是默认参照父级的原始点为原始点，配合TRBL进行
复制链接

扫一扫