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