position:relative 相对定位
1.仍在文档流中
2.参照物为元素本身
** 使用场景:绝对定位元素的参照物 **
position:absolute 绝对定位
1.默认宽度为内容宽度
2.脱离文档流(如下图,下面的元素上浮)
3.参照物为第一个定位祖先/根元素
如果给绝对定位设置了top、bottom、left、right 则改元素会被撑为符合改条件的大小
** 使用场景:布局-轮播头图 **
position:fixed 固定定位元素
1.默认宽度为内容宽度
2.脱离文档流
3.参照物为视窗
** 使用场景:布局-固定顶栏、遮罩 **
案例三行自适应布局
body部分自适应,head、foot固定
说明:body部分采用了top、bottom、left、right方式撑满了整个视窗。