css: About Position

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方式撑满了整个视窗。