1、簡介
Position 屬性規定元素的定位類型，其可用屬性為：
- absolute：生成絕對定位的元素，相對于 static 定位以外的第一個 父元素進行定位。元素的位置通過 “left”、“top”、“right” 以及 “bottom” 屬性進行規定。
- fixed：生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過 “left”、“top”、“right”、“bottom” 屬性規定。
- relative：生成相對定位的元素，相對于其正常位置進行定位。元素的位置通過 “left”、“top”、“right”、“bottom” 屬性規定。
- static：預設值。沒有定位，元素出現在正常流中（忽略 “left”、“top”、“right”、“bottom” 或者 “z-index” 聲明）。
- inherit：規定應該從父元素繼承 position 屬性的值。
2、static
所有元素的預設 position 屬性值為 static，這意味着所有元素沒有被定位，元素出現在正常流中。
通常不需要顯式的定義該屬性，除非你要重寫之前的設定。
3、relative
将 position 設定為 relative 後，就可通過 “left”、“top”、“right”、“bottom” 屬性來設定位置，該位置是相對于自身相對于正常流中的位置，并且占位，即自身在正常流中的位置依舊存在。
從上圖中可以看出，雖然将 div1 通過 relative 移走後，它在原流中的位置，依舊存在，隻不過是一個空的空間，下面的元素并沒有移動。
4、absolute
将 position 設定為 absolute 後，可将元素從正常流中移走（不占位），并通過 “left”、“top”、“right”、“bottom” 屬性來設定位置。其相對于 static 定位以外的第一個父元素進行定位。
從上圖可以看到，将 div1-2 設定為 absolute 後，通過 top 和 left 後将 div1-2 從正常流中移走，由于 absolute 設定後元素在正常流中不占位，是以 div1-3 上移與 div1-1 相鄰。并且，由于其父節點使用的是預設位置 static 是以，其移動的位置是相對于 body ，故，div1-2 移動到了右上方。
如果想相對以其父元素 div1 進行移動，要将 div1 的位置設定為除 static 外的其他屬性。此處設定為 relative。
5、fixed
将 position 設定為 fixed 後，可将元素從正常流中移走（不占位），并通過 “left”、“top”、“right”、“bottom” 屬性來設定位置，該位置是相對于與浏覽器視窗的，并且固定于該位置。
6、兩列排列
可以通過 relative 和 absolute 來設定兩列排列。