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 來設置兩列排列。
