CSS包含3种基本的布局模型，分别是Flow、Layer和Float.
在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）
流动模型
流动（Flow）是默认的网页布局模式。
也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。
典型特征
1.块状元素都处在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型
通过CSS设置块状元素的float属性，可以将多个块状元素显示在同一行。如float:left;
层模型
通过CSS设置position属性，来实现层布局模型。
层模型有三种形式：绝对定位（absolute）、相对定位（relative）和固定定位（fixed）。
一、绝对定位 position:absolute
将元素从文档流中拖出来，然后使用left、rigth、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
二、相对定位 position:relative
通过left、rigth、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
三、固定定位 position:fixed
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
relative与absolute组合使用
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了