（注1：如果有問題歡迎留言探討，一起學習！轉載請注明出處，喜歡可以點個贊哦！）
（注2：更多內容請查看我的目錄。）
1. 簡介
我們之前談到了盒模型，那么這若干個盒子是怎么堆砌成一個完整的網頁呢？
主要有三種定位機制：普通流，浮動和絕對定位。我們仍然以隊形為例來講解這三種定位機制。
2. 普通流
最普通的站隊方式是怎樣的呢，一般是站成幾排幾列。從前到后，從左到右依次排列。普通流就是這樣的，塊級元素從上到下，行內元素從左到右依次排列。至于塊級元素和行內元素的區別和定義我們會在下一章詳細講解。
3. 定位
默認的隊形站好了，教官還可以通過喊口號來改變隊伍的隊形。CSS也提供了position屬性，控制隊伍的定位。
- static 默認定位，元素框按照塊級元素從上到下，行內元素從左到右依次排列，在普通文檔流中。就是最原始的隊形。
- relative 相對定位，元素相對static的位置偏移某個距離，但他原來的位置仍保留，在普通文檔流中。就好比教官喊，XX出列，向前一步，向右三步走。這時候你人不在原本的位置了，但你本來的位置仍然保留了。
- absolute 絕對定位，元素相對其非static定位的第一個祖先元素（包括父元素）進行定位，若沒有該類祖先元素，則會相對body進行定位。其原來的位置不存在了，通過 "left", "top", "right" 以及 "bottom" 屬性進行定位，脫離了普通文檔流。就好比教官喊XX出列，后續同學補齊XX位置，XX仿佛不存在于原隊伍中一樣。然后命令XX相對于其非static的大集體，靠左多少步，靠上多少步站位。站位以后可能會與原隊友位置重疊，誰露出，由z-index屬性決定。（具體的覆蓋規則可以看CSS入門11-定位與覆蓋）
- fixed 固定定位，元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身，脫離了普通文檔流。就是仍然是自由人，但是你的位置是相對于整體隊伍所在的場地來定義的。
4. 浮動
浮動的元素，就是從原文檔流將該元素框拿出來向左或是向右滑動，直到碰到另一個浮動框或者邊緣為止。就好比教官說第二排，向左浮動，第二排就會從隊伍中出來，和第一排重合，第三排往后都往前一排走。如果命令每一排都向左浮動，則所有隊伍站成了一排。
參考：
CSS 定位 (Positioning)
脫離文檔流分析
css定位流布局
CSS中的三種基本的定位機制（普通流、定位、浮動）
CSS定位的三種機制：普通流、絕對定位和浮動
html/css基礎篇——DOM中關于脫離文檔流的幾種情況分析
CSS position絕對定位absolute relative
CSS絕對定位absolute詳解
