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來進行偏移定位了