position:relative 相对定位
1.仍在文档流中
2.参照物为元素本身
** 使用场景:绝对定位元素的参照物 **
屏幕快照 2016-07-21 下午12.14.51.png
position:absolute 绝对定位
1.默认宽度为内容宽度
2.脱离文档流（如下图，下面的元素上浮）
3.参照物为第一个定位祖先／根元素
如果给绝对定位设置了top、bottom、left、right 则改元素会被撑为符合改条件的大小
** 使用场景:布局－轮播头图 **
屏幕快照 2016-07-21 下午12.22.03.png
屏幕快照 2016-07-21 下午12.24.54.png
position:fixed 固定定位元素
1.默认宽度为内容宽度
2.脱离文档流
3.参照物为视窗
** 使用场景:布局－固定顶栏、遮罩 **
屏幕快照 2016-07-21 下午12.40.15.png
屏幕快照 2016-07-21 下午12.42.34.png
案例三行自适应布局
body部分自适应，head、foot固定
屏幕快照 2016-07-21 下午12.56.02.png
说明：body部分采用了top、bottom、left、right方式撑满了整个视窗。
网友评论