position屬性
1.說明
position屬性和float一樣，也是一種使元素脫離文檔流的屬性
position： static | relative | absolute | fixed |inherit
①absolute ：絕對定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
②relative ：相對定位；文檔流的布局不變，只改變自身的位置，在文檔流原先的位置遺留空白區域。定位的起始位置為此元素原先在文檔流的位置。
③fixed ：固定定位；類似於absolute，但不隨着滾動條的移動而改變位置。
④static ：默認值；默認布局。
輔助屬性：
position屬性只是使元素脫離文檔流，要想此元素能按照希望的位置顯示，就需要使用下面的屬性(position:static不支持這些)：
①left ： 表示向元素的左邊插入多少像素，使元素向右移動多少像素。
②right ：表示向元素的右邊插入多少像素，使元素向左移動多少像素。
③top ：表示向元素的上方插入多少像素，使元素向下移動多少像素。
④bottom ：表示向元素的下方插入多少像素，使元素向上移動多少像素。
上面屬性的值可以為負，單位：px
2.對於四種定位屬性的解釋
對於以下代碼
<div style="border: solid 5px #333; width:300px;"> <div id="redBox" style="height: 100px; width: 100px; background-color: Red;float:right; "> </div> <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;"> </div> <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"> </div> </div>
出現圖一
（static作為默認布局，不作解釋）
2.1使用relative屬性
相對定位；文檔流的布局不變，只改變自身位置，在文檔流原先的位置遺留空白區域。定位的起始位置為此元素原先在文檔流的位置，可以覆蓋其他元素。
然后將greenBox設置為position:relative; left:180px ;top:10px;會出現圖二
圖一
圖二
圖三
2.2使用absolute屬性
絕對定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
然后將greenBox設置為position:absolute; left:180px ;top:10px;會出現圖3
這里可能會發現，圖三top和relative間距是不同的，然而top都是10px，這是為什么呢？
重新回到對絕對定位的理解
絕對定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
看標紅的那句話，這也就是說，position的位置是相對於body而言的，然而最外面的box和body距離10px，所以他們頂部才會重合
將父元素的position設置為relative或者absolute 則會出現圖四
圖四
絕對定位上的垂直居中問題
對於盒子模型，應該有很深的理解，盒子模型可以對定寬元素使用margin:0 auto;來做到水平居中；
但是對於垂直居中，使用類似的方法margin: auto 0;卻做不到，這是因為垂直方向上的外邊距等於零css會自動解讀為margin-top:0；
然而在absolute屬性中，垂直居中得到了一種很好的解決方式
使用{left:0; right : 0; margin:0 auto;}可以得到水平居中，
使用{top:0; bottom:0;margin: auto 0; }可以得到垂直居中，
同樣的，使用{left:0; right : 0;top:0; bottom:0; margin: auto ;}可以得到垂直水平同時居中。
<div style="border: solid 5px #333;position:absolute;height:300px; width:300px;"> <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;position:absolute; ; left:0; right:0;top:0;bottom:0; margin: auto;"> absolute </div> </div>
2.3使用fixed屬性
固定定位；類似於absolute，但不隨着滾動條的移動而改變位置。
fixed是相對與瀏覽器窗口的，也就是固定在屏幕的某個位置，不能隨着滾動條移動。
3.相關屬性overflow，z-index
overflow: scroll | hidden
scroll,超出元素塊的內容以滾動條顯示，
hidden:超出部分隱藏
z-index：<integer>
因為position屬性的元素可以相互遮蓋，所以需要z-index屬性來改變默認的覆蓋先后順序。