position： static | relative | absolute | fixed |inherit
①absolute：絕對定位；脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為body文件本身。
②relative：相對定位；文件流的布局不變，只改變自身的位置，在文件流原先的位置遺留空白區域。定位的起始位置為此元素原先在文件流的位置。
③fixed：固定定位；類似於absolute，但不隨著滾動條的移動而改變位置。
④static：預設值；預設布局。
輔助屬性：
position屬性只是使元素脫離文件流，要想此元素能按照希望的位置顯示，就需要使用下面的屬性(position:static不支援這些)：
①left ： 表示向元素的左邊插入多少畫素，使元素向右移動多少畫素。
②right ：表示向元素的右邊插入多少畫素，使元素向左移動多少畫素。
③top ：表示向元素的上方插入多少畫素，使元素向下移動多少畫素。
④bottom ：表示向元素的下方插入多少畫素，使元素向上移動多少畫素。
上面屬性的值可以為負，單位：px
對於以下**
<出現圖一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作為預設布局，不作解釋）
相對定位；文件流的布局不變，只改變自身位置，在文件流原先的位置遺留空白區域。定位的起始位置為此元素原先在文件流的位置，可以覆蓋其他元素。
然後將greenbox設定為position:relative; left:180px ;top:10px;會出現圖二
圖一圖二
圖三絕對定位；脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素(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屬性中，垂直居中得到了一種很好的解決方式
使用可以得到水平居中，
使用可以得到垂直居中，
同樣的，使用可以得到垂直水平同時居中。
固定定位；類似於absolute，但不隨著滾動條的移動而改變位置。
fixed是相對與瀏覽器視窗的，也就是固定在螢幕的某個位置，不能隨著滾動條移動。
scroll,超出元素塊的內容以滾動條顯示，
hidden:超出部分隱藏
因為position屬性的元素可以相互遮蓋，所以需要z-index屬性來改變預設的覆蓋先後順序。
css 4種定位方式
css的定位即position屬性的值有4種 static,relative,absolute,fixed。static是預設值，元素位於文件流中，正常顯示，忽略元素的top,bottom,left,right屬性。需要注意的一點是z index屬性在這個定位方式下始終為0.如果其他定位方式的漂浮元...
CSS（4） 文字布局
文字 可以控制字型，文字大小，文字顏色，文字粗細，斜體，下 中 頂劃線。text transform 首字母或全部首字母大寫.font family 控制字形，見另一blog font size 控制字型 例如 p.f12 text decoration 實現underline 下劃線 overli...
CSS（4） 媒介查詢，響應式布局, 彈性盒子布局
列印和螢幕顯示不同的字型和字型大小。media screen media print media screen,print 螢幕大於600px小於900px的視窗應該應用的樣式 media screen and min width 600px and max width 900px 判斷螢幕方向or...